Question

我想使用jQuery append函数无限地将一些html元素从一个容器移动到另一个容器，但是当我点击已经附加的元素时，click事件不会再触发。< / p>

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

以下是：Fiddle

    $('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

我尝试了here并且它有效..

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

$('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也喜欢通过id及其快速查找。您可以使用。

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

为什么不点击附加元素？

4 个答案: