jquery - 为什么单击对附加元素不起作用？

Question

我想使用 jQueryappend函数将一些 html 元素从一个容器无休止地移动到另一个容器，但是当我单击已附加的元素时，单击事件将不再触发。

基于一些类似于我的线程，我发现附加元素被从它们的事件监听器中剥离。我怎样才能避免这种情况，有人可以提出解决方案吗？

这是： 小提琴

    $('section.container-A div.elem').click(function() {
        $('section.container-B').append(this) ;
    }) ;

    $('section.container-B div.elem').click(function() {
        $('section.container-A').append(this) ;
    }) ;

Answer 1

它会起作用的。使用以下方法进行附加。

 $(document).on('click', 'section.container-A div.elem', function() {
        $('section.container-B').append(this) ;
 }) ;

问题的解释，

执行以下操作，

$("span").click(function(){

加载页面时，将事件处理程序附加到页面上当前span的所有元素。每次点击都会创建新元素。他们没有附加处理程序。您可以使用

$(document).on('click', 'span.class', function(...

这也将处理对新元素的点击。

Answer 2

您需要使用以下.on()方法：

$(document).on('click', 'section.container-1 div.elem', function() {
    var html = this;
    $('section.container-2').append(html) ;
}) ;

$(document).on('click', 'section.container-2 div.elem', function() {
    var html = this;
    $('section.container-1').append(html) ;
}) ;

小提琴：http: //jsfiddle.net/x2A7n/16/

Answer 3

我在这里尝试过，它有效..

这是代码，希望对您有所帮助。

$('section.container-1 div.elem').click(function() {     
    var a = $(this).text();     
    $('section.container-2').append('<div class=\'elem\'>' + a + '</div>') ;
}) ;

$('section.container-2 div.elem').click(function() {
    var a = $(this).text();
    $('section.container-1').append('<div  class=\'elem\'>' + a + '</div>') ;
}) ;

Answer 4

当页面中有多个 div 和多个类时，调用正确的 div 可能会很麻烦。我通过将 id 添加到 div 找到并修复了它，jquery 也喜欢 find by id 和它的速度。您可以使用。

$(document).on('click touchstart', 'div#the_id div.the_class', function(){
 //yourcode
}