Question

我希望列表项在单击时移动到div，反之亦然。但似乎只有从源加载的元素才能被移动。

我该怎么做？谢谢。

 <div class="green">
    <ul id="selectable">
        <li class="content-item">Item A</li>
    </ul>
</div>


<div class="red">
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
    <span class="selected-item">Item 1</span>
</div>

<script>

$(".selected-item").click(function() {
    var text =  "<li class='content-item' >"+$(this).text()+"</li>";
    $(".green #selectable").prepend( text );
    $(this).remove();
});

$(".content-item").click(function() {
    var text =  "<span class='selected-item'>"+$(this).text()+"</span>";
    $(".red").append( text );
    $(this).remove();
});
</script>

http://jsfiddle.net/wGz8s/112/

Answer 1

尝试在此处使用event delegation，因为在运行时添加的元素在事件绑定期间将不可用，

$(document).on("click",".selected-item", function() {
   var text =  "<li class='content-item' >"+$(this).text()+"</li>";
   $(".green #selectable").prepend( text );
   $(this).remove();
});

和

$(document).on("click",".content-item", function() {
  var text =  "<span class='selected-item'>"+$(this).text()+"</span>";
  $(".red").append( text );
  $(this).remove();
});

在代码中的文档位置使用选择器的静态最接近的dom元素，该元素在.on()内传递

Answer 2

您应该使用jQuery's event delegation。

问题是：你的jsFiddle使用的是jQuery 1.4（非常旧版本），它没有.on事件。

我已将其更新到版本1.11，它就像一个魅力：

$(".abc").on("click", "span", function(e) {
    var text =  "<li class='content-item' >"+$(e.target).text()+"</li>";
    $(".choices #selectable").prepend( text );
    $(e.target).remove();
});

$(".choices").on("click", "li", function(e) {
    var text =  "<span class='selected-item'>"+$(e.target).text()+"</span>";
    $(".abc").append( text );
    $(e.target).remove();
});

http://jsfiddle.net/wGz8s/113/

如何删除jquery添加的元素？

2 个答案: