Question

我正在关注jQuery脚本，点击左侧div中的Li将其移动到右侧div。

$(document).ready(function(){

   $('.left ul li').click(function(){
      var toAdd = $(this).html();
      $('.right ul').append('<li>' + toAdd + '</li>');
   });

    $(document).on('click', '.left ul li', function(){
        $(this).remove();
    });

});

完美无缺。但是，如果我尝试对左侧div中的Li元素执行相同操作，那么在ckick它们之后它们移动到左侧div，它就不起作用。

$(document).ready(function(){

   $('.left ul li').click(function(){
      var toAdd = $(this).html();
      $('.right ul').append('<li>' + toAdd + '</li>');
    });

    $(document).on('click', '.left ul li', function(){
        $(this).remove();
    });

  $('.right ul li').click(function(){
      var toAdd = $(this).html();
      $('.left ul').append('<li>' + toAdd + '</li>');
    });

  $(document).on('click', '.right ul li', function(){
        $(this).remove();
    });

});

我做错了什么？

这是codepen链接：

http://codepen.io/itsthomas/pen/hIfLD

感谢您的帮助。

Answer 1

您无法将事件绑定到不存在的元素。

$(document).ready(function(){   
    $(document).on('click', '.left ul li', function(){
        $(this).remove();
        var toAdd = $(this).html();
        $('.right ul').append('<li>' + toAdd + '</li>');
    });  

    $(document).on('click', '.right ul li', function(){
        $(this).remove();
        var toAdd = $(this).html();
        $('.left ul').append('<li>' + toAdd + '</li>');
    });  
});

jQuery：移动Li元素？

1 个答案: