我知道jquery .on()的使用和目的,因为我使用它.
但是我想知道这个脚本中$(document).on()vs $(element).on()之间的区别是什么:
<html>
...
<body>
...
<table id="table-user">
<thead>...</thead>
<tbody>
AJAX DYNAMIC CONTENT
</tbody>
</table>
....
<script>
$(document).on('click','.btn-edit',function(){
go_edit();
});
$('#table-user').on('click','.btn-edit',function(){
go_edit();
});
</script>
</body>
</html>
是什么表现不同或他们之间的其他东西？
Yea*_*der 11
@Mukesh已经回答了主要的区别.我会尝试再增加一件事.
当您在html文档中的元素(如div或按钮)上单击(或任何其他事件)时,该单击事件将传播到该元素的父元素.所以如果你有这样的结构:
<div>
<table>
<tr>
<td>
<button>Click Me</button>
</td>
</tr>
</table>
</dvi>
然后单击按钮,该单击将传播到td,然后传播到tr,然后传播到表,最后传播到文档本身.
现在假设您已经在文档上注册了一个click事件($ document.on('click',...))以及按钮($(button.on('click',...))),两者都做了一些不同的动作.然后,如果单击该按钮,将执行相应的按钮操作,并且还将执行$(文档)的相应操作.
要防止按钮单击传播到文档本身,您需要对按钮单击处理程序执行操作(如stopPropagation等)
$(document).on('click','.btn-edit',function()
这会将单击事件绑定到文档及其中的所有子元素.此方法称为委托事件处理.
$('#table-user').on('click','.btn-edit',function()
将click事件直接绑定到#table-user.直接在元素上捕获事件.
考虑这样的情况：您要监听其事件的节点在 DOM 中尚不存在。然后$(document).on('event', 'child-selector', callback);事实证明非常有帮助。