ejs 多个 class 名称

Question

我有以下ejs文件

<head>
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet"/>
<link href="/css/bootstrap.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="/css/quizPage.css" />
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/bootstrap.js"></script>
<title>{{title}}</title>
</head>
<body>
<script src="text/javascript">
    $(document).on('click', '.save_qn', function(){
    console.log("Hi i m inside save");
});
</script>
<input type="button" class="save_qn btn btn-primary center-block" value="Save"/>

出于某种原因，save_qn class 未被 jQuery 选择器识别。如果我从上面的 class 属性中删除其他三个 classes，它就可以正常工作。 bootstrap.css 文件位于我在上面的 link 标记中使用的路径中。有什么帮助吗？

当我将文件另存为 .html 时，这曾经有效。但我不认为问题是因为 .ejs 文件格式。请分享您的意见。

谢谢

Answer 1

这里有两个问题，它们与 EJS 无关。顺便说一句，您的代码中没有使用任何 EJS。 :

在使用 jQuery 时，使用 jQuery Ready 方法来包含所有 jQuery 逻辑，例如选择器、事件侦听器等。这是因为您不希望您的 jQuery 代码在目标 DOM 元素加载并准备好使用之前执行。通过将您的 jQuery 代码包含在 jQuery 就绪函数中，如下所示，您可以确保 DOM 元素可供 jQuery 执行。
```
<script>
$(function() {
    // all jQ code goes here
});
</script>
```
或使用 ES 2015 箭头函数表示法：
```
<script>
$(() => {
    // all jQ code goes here
});
</script>
```
我注意到的第二个问题是带有 jQuery 事件侦听器的脚本标记位于页面正文中，而不是在页面头部。这很好用，但是，您应该将它移到正文的末尾，就在结束 </body> 标记之前。这也确保所有 HTML 至少在 JavaScript 尝试获取 control/modify 之前加载并存在。

ejs 多个 class 名称

ejs multiple class names

ejs

twitter-bootstrap