jquery - 带有 HANDLEBARS 模板的按钮不会触发事件
问题描述
我试图为车把模板中的按钮提供点击事件。但是这些事件并没有被解雇。请在下面找到代码:
模板
<table class="table shadow p-3 mb-5 bg-white rounded">
<thead class="thead-dark">
<tr>
<th scope="col">NAME</th>
<th scope="col">EMAIL</th>
<th scope="col">DOB</th>
<th scope="col">DEPT</th>
<th scope="col">GENDER</th>
<th scope="col">AGE</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{{#each ALL_RECORDS}}
<tr>
<td scope="row">{{this.name}}</td>
<td scope="row">{{this.eMail}}</td>
<td scope="row">{{this.DOB}}</td>
<td scope="row">{{this.dept}}</td>
<td scope="row">{{this.gender}}</td>
<td scope="row">{{this.age}}</td>
<th scope="row" style="text-align: center"><button class="btn btn-primary" type="button" name="EDIT_BTN">EDIT</button></th>
<th scope="row" style="text-align: center"><button class="btn btn-danger" type="button" name="DEL_BTN">DELETE</button></th>
</tr>
{{/each}}
</tbody>
</table>
jQuery
$("[name='DEL_BTN']").click(function(){
alert("DELETE BUTTON CLICKED");
})
在此处单击删除按钮时,它不会触发警报。当从模板移出到 HTML 页面时,相同的按钮工作正常。你能帮我解决这个问题吗??
解决方案
尝试在您的函数周围添加 $(document).ready() 以便您的模板将被渲染并插入到 DOM 中。
$(document).ready(function(){
$("[name='DEL_BTN']").click(function(){
alert("DELETE BUTTON CLICKED");
})
});
我认为您的问题是在您启动 jquery 函数时事件未绑定到您的按钮。如果您不想使用 $(document).ready 方法,只需确保在使用选择器并启动警报之前已评估您的车把模板并将其插入 DOM。
推荐阅读
- xml - XML XPath 将 YYYMMDD 日期转换为月份名称?
- python-3.x - 比较两个不同 pandas 列中的值
- java - Apache POI:完全从 Word 模板文件中删除图表
- python - 脚本适用于其他人,不适用于我(错误:self.fp = io.open(file, filemode) PermissionError: [Errno 13] Permission denied)
- java - 如何将 Java 日期对象转换为带有时区的 Matlab 日期时间数组
- sql - Hive - 将行与搜索词子字符串合并
- android - UrlQuerySanitizer 中的未注册参数是什么?
- java - 有没有办法从 Java 中的 URL 读取 XLSX 文件?
- vue.js - 使用 Vuetify (1.0.5) 在附加图标上添加工具提示
- scala - 未经授权的 sbt 下载依赖