我试图理解使用jQuery .on()方法的直接和委托事件处理程序之间的这种特殊区别.具体而言,本段最后一句:
当
selector被提供时,事件处理程序被称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.
"运行任何元素的处理程序"是什么意思?我做了一个测试页面来试验这个概念.但是以下两个结构导致了相同的行为:
$("div#target span.green").on("click", function() {
alert($(this).attr("class") + " is clicked");
});
Run Code Online (Sandbox Code Playgroud)
要么,
$("div#target").on("click", "span.green", function() {
alert($(this).attr("class") + " is clicked");
});
Run Code Online (Sandbox Code Playgroud)
也许有人可以参考一个不同的例子来澄清这一点?谢谢.
javascript jquery event-bubbling event-binding jquery-events
我有一个<div>使用id="modal"jQuery load()方法动态生成的:
$('#modal').load('handlers/word.edit.php');
Run Code Online (Sandbox Code Playgroud)
word.edit.php包含一些输入元素,它们被加载到一个模态中<div>.
使用jQuery的keyup方法我可以在事件触发后捕获输入值,但是当元素被动态添加到模态div时,当用户输入文本时,事件不会激活.
哪个jQuery方法支持处理由动态创建的元素触发的事件?
用于创建新输入元素的代码是:
$('#add').click(function() {
$('<input id="'+i+'" type="text" name="translations' + i + '" />')
.appendTo('#modal');
Run Code Online (Sandbox Code Playgroud)
捕获用户值的代码是:
$('input').keyup(function() {
handler = $(this).val();
name = $(this).attr('name');
Run Code Online (Sandbox Code Playgroud)
第二个代码块似乎适用于原始元素,但新动态生成的元素不会触发它.