将单击事件绑定到使用jQueryon()动态加载的实体
Binding a click event to entities loaded dynamically using jQuery on()
这是一个常见的问题,问了很多次,但我找不到解决问题的方法。
我有一个HTML表,其中的数据是使用ajax加载的。我需要将一个点击事件绑定到删除链接。由于这些数据是使用ajax加载的,我尝试使用jQueryon()方法,如下所示。
$('.datagrid').on('load', '.action', function(){
$('.action a#deleteTrigger').each(function() {
$(this).click(function() {
alert('called..');
})
});
})
但这行不通。下面是我的HTML DOM的简单说明。
<table class='datagrid'>
<tr id="row-1">
<td class="">
1
</td>
<td class="">
admin
</td>
<td>
<a id="deleteTrigger" href="#">Delete</a>
</td>
</tr>
<tr id="row-2">
<td class="">
1
</td>
<td class="">
admin
</td>
<td>
<a id="deleteTrigger" href="#">Delete</a>
</td>
</tr>
<tr id="row-3">
<td class="">
1
</td>
<td class="">
admin
</td>
<td class='action'>
<a id="deleteTrigger" href="#">Delete</a>
</td>
</tr>
</table>
有人能帮我吗
通过ajax加载不会触发load
事件,因此尝试使用它不会有任何效果。
此外,内容中似乎有重复的id。id在文档中必须是唯一的,尝试使用选择器查找重复的id是行不通的。您应该使用类名。
解决动态加载元素上的事件处理程序的更好方法可能是对内容中的类名使用委托事件处理。
如果您将HTML更改为这样的类名:
<a class="deleteTrigger" href="#">Delete</a>
然后,假设表的顶部不是动态加载的,您可以通过委托的事件处理绑定到它,如下所示:
$(".datagrid").on("click", ".deleteTrigger", function(e) {
// click handler for delete button
});
如果即使是表的顶部也是动态加载的,那么您也可以更改为DOM中更高级别的其他静态父级(只要没有动态加载,就应该选择尽可能靠近内容的父级),如下所示:
$("selector of some static parent").on("click", ".deleteTrigger", function(e) {
// click handler for delete button
});
您可以看到关于使用.on()
:进行委托事件处理的其他参考资料
jQuery.live()与.on()方法在加载动态html 后添加点击事件
jQuery.on不起作用,但.live起作用
jQuery.on()是否适用于创建事件处理程序后添加的元素?
使用class而不是id
<td class='action'>
<a class="deleteTrigger" href="#">Delete</a>
</td>
和javascript
$(document).on("click",".deleteTrigger",function(e){
alert('called..');
e.preventdefault()
});
这可能对你有帮助。
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 动态加载和卸载js文件
- 动态加载angularjs并生成控制器和范围
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 动态加载fancybox并将其连接
- 对插件初始化后动态加载的元素进行样式设置
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- UIWebview赢得't通过基本身份验证加载动态加载的资源(通过jQuery mobile)
- 使用jquery垂直对齐动态加载的图像
- 在动态加载的对话框中执行Javascript
- angularjs-bindng-click从jquery动态加载DOM
- 在动态加载的html中使用角度控制器
- 如何使用Javascript在FireFox中将html从内存动态加载到iframe中
- 使用systemJS的相对动态加载,使用ES6/Babel语法
- 为什么动态加载的事件在我的代码中不能正常工作
- 在不同的域上动态加载样式表;不适用于Firefox
- 在动态加载的PHP表单上放置JavaScript事件
- 在混合基本 URL 下动态加载 require.js 模块
- 动态加载引导模式主体