在附加元素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>

来源

2010-07-21 ina

做这样的：

试试看：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/

来源

2010-07-21 13:27:15 user113716

委托是非常有用的！谢谢！（和jsfiddle，太！） – ina 2010-07-22 02:14:27

@ina - 不客气。是的，'.delegate（）'很好。我通常喜欢直接“绑定”事件，就像在第一个示例中一样，但是如果容器中有许多相同类型，或者只是想要一些便利，'.delegate（）'很棒。 – user113716 2010-07-22 02:36:38

使用方法现场的元素，而不是使用绑定动态绑定事件。

例如：

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

来源

2010-07-21 13:25:58 dejavu

第二事件处理程序的结合时，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'); 
    }); 
});

来源

2010-07-21 13:29:28

每个都有性能损失/差异吗？ – ina 2010-07-22 00:52:19

@说实话，我有neaver用他们两人衡量表现。我希望'live'是最昂贵的，因为它必须跟踪整个DOM树寻找新的元素，但是如果你看一下API文档，可能有一种简单的方法来限制你绑定的树的哪一部分去，并避免在比你需要的地方看更多的地方。至于另外两个，我希望他们或多或少是一样的，至少只要你没有这么做十万次。 – 2010-07-22 07:01:17

在附加元素jQuery检测事件

回答

相关问题