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/

Answer 2

第二个事件处理程序的绑定发生在加载DOM时 - 并且不存在匹配元素。单击该链接时，会添加一个元素，但不会附加任何事件处理程序。

有三种方法可以解决这个问题：

使用.live() api代替.click()

$('input').live('click', function() { alert('clicked'); });

在点击事件中添加事件处理程序。

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

或者，类似，但使用jQuery链接

$(document).ready(function() {
    $('.clickme').click(function() {
        $('<input>')
            .attr('type','text')
            .addClass('writesomething')
            .click(function() { alert('clicked!'); })
            .appendTo('.extra');
    });
});

Answer 3

使用 live 方法动态地将事件与元素绑定，而不是使用 bind 。

例如：

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

jQuery检测附加元素中的事件

3 个答案: