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"/>

由于某种原因，jQuery选择器无法识别save_qn类。如果我从上面的class属性中删除其他三个类，它可以正常工作。我在上面链接标记中使用的路径中提供了bootstrap.css文件。有什么帮助吗？

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

由于

Answer 1

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

使用jQuery时，使用jQuery Ready方法将所有jQuery逻辑（如选择器，事件侦听器等）括起来。这是因为您不希望在加载目标DOM元素之前执行jQuery代码并准备好使用。通过将jQuery代码包含在jQuery ready函数中，如下所示，确保DOM元素可供jQuery使用。
```
<script>
$(function() {
    // all jQ code goes here
});
</script>
```
或使用ES 2015箭头函数表示法：
```
<script>
$(() => {
    // all jQ code goes here
});
</script>
```
我注意到的第二个问题是你的jQuery事件监听器的脚本标签位于页面主体内，而不在头部。这样可以正常工作，您应该在结束</body>标记之前将其移动到正文的末尾。这也确保在JavaScript尝试控制/修改所有HTML之前至少加载和存在所有HTML。

ejs多个类名

1 个答案: