我试图找出两者之间的区别是什么。
$(document).on('click', '#id', function(){});
和
$('#id').on('click', function(){});
我找不到任何关于这两者是否有任何区别,如果有的话是什么区别的信息。
请问有人能解释一下是否有任何区别吗?
document
),当事件从与选择器匹配的元素发起并到达该元素时,将执行它。#id
元素,则会生成一个单击事件,该事件将通过所有祖先元素冒泡上升 (顺便说一下:实际上,在此之前有一个称为“捕获阶段”的阶段,当事件从树上下来到目标时)。您可以在这些祖先元素中的任何一个上捕获事件。#id
元素是在第二个示例之后创建的,则您的处理程序永远不会执行。通过绑定到您知道在执行时肯定存在于DOM中的元素,您确保您的处理程序实际上已附加到某个内容并可以在适当的时候执行。$(document).on('click', $('#id'), function()...)
пјҢжҲ‘иҜҘеҰӮдҪ•дҪҝз”Ё $(this)
жқҘеј•з”Ё $('#id')
пјҹзӣ®еүҚ $(this)
жӯЈеңЁеј•з”Ё document
- жҲ‘зҗҶи§ЈиҝҷдёҖзӮ№гҖӮ - cheshireoctopus考虑下面的代码
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
现在,这里有所不同
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
现在,如果我们再添加一个myTask怎么办?
$('#myTask').append('<li>Answer this question on SO</li>');
点击这个 myTask 项目不会将其从列表中删除,因为它没有绑定任何事件处理程序。如果我们使用 .on
,新项目将无需额外的努力即可工作。下面是 .on 版本的代码:
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
摘要:
.on()
和 .click()
的区别在于,当与 .click()
事件相关联的 DOM 元素在稍后动态添加时,.click()
可能无法正常工作,而 .on()
可以在后期生成与调用 .on()
相关的 DOM 元素的情况下使用。
on()
的文档中有解释。只需要读一些文档 :) - Reinstate Monica Cellio