jQuery 检测附加元素中的事件

Question

我正在尝试检测 jQuery 附加元素中的事件。

• 你是如何做到这一点的，
• 和/或为什么这不起作用:

这是我尝试过的简化片段。单击“单击我”后将触发输入字段。单击输入后，警报不会触发 - 此附加输入上的其他事件也不会触发。 :-(

以下内容位于脚本标记中:

$(document).ready(function(){   
  $(".clickme").click(function(){$(".extra").append('write: <input type="text" class="writesomething" />');});
  $("input").click(function(){alert("clicked")});
});

正文内容如下:

<a href="#" onclick="return false" class="clickme">click me</a>
<div class="extra"></div>

Answer 1

这样做:

尝试一下: http://jsfiddle.net/eDDeZ/1/

$(".clickme").click(function(){
    $('<input type="text" class="writesomething" />') 
             .click(function(){alert("clicked")})
             .appendTo('.extra')
             .before('write: ');
});

您正在创建新元素，直接为其分配点击处理程序，将其附加到 .extra，然后在其前面添加 write: 文本。

这样就不需要.live()了。

<小时/>

编辑:

另一种选择是使用 .delegate() ，它比 .live() 更高效，因为它专注于特定容器而不是整个页面。

尝试一下: http://jsfiddle.net/eDDeZ/2/

$(".clickme").click(function(){
    $('.extra').append('write: <input type="text" class="writesomething" />') 
});

$('.extra').delegate('input','click',function(){alert("clicked")});

• http://api.jquery.com/delegate/