我先创建DOM元素,然后使用这些DOM元素创建JQuery对象数组。在对JQuery对象进行排序并重新附加它们之后,单击事件侦听器消失了。有没有办法保留点击侦听器?

for(var i=0; i<5; i++){
    var div = $('<div>',{
    id: i+"div",
    class: 'list-item '+i,
    html: "Item #"+i
  });
  div.data('i',i);
  $('.news-layout-1').append(div);
  div.on('click',function(){
    alert($(this).data('i'));
  });
}

$('.button').on('click',function(){
    var items = [];
  $('.news-layout-1').find('.list-item').each(function(index, item){
    items.push(item);
  });

  items = items.sort(function(a,b){
    var textA = $(a).html().toUpperCase();
    var textB = $(b).html().toUpperCase();
    return (textA > textB) ? -1 : (textA < textB) ? 1 : 0;
  });

  $('.news-layout-1').html('');

  for(var i=0; i<items.length; i++){
    $('.news-layout-1').append(items[i]);
  }
});

http://jsfiddle.net/bhav4co6/5/

最佳答案

您正在清除HTML,有效地从DOM中删除了元素,这些元素仅保留在内存中,在那里它们丢失了所有关联的数据和事件。

当您执行.empty()来确保绝对删除元素,数据和事件侦听器时,jQuery还在内部使用.html("")

如果您只是删除行

$('.news-layout-1').html('');

很好,因为元素将被移动,并保留事件监听器

for (var i = 0; i < 5; i++) {
    var div = $('<div>', {
        id: i + "div",
        class: 'list-item ' + i,
        html: "Item #" + i
    });
    div.data('i', i);
    $('.news-layout-1').append(div);
    div.on('click', function() {
        alert($(this).data('i'));
    });
}

$('.button').on('click', function() {
    var items = [];
    $('.news-layout-1').find('.list-item').each(function(index, item) {
        items.push(item);
    });

    items = items.sort(function(a, b) {
        var textA = $(a).html().toUpperCase();
        var textB = $(b).html().toUpperCase();
        return (textA > textB) ? -1 : (textA < textB) ? 1 : 0;
    });

    for (var i = 0; i < items.length; i++) {
        $('.news-layout-1').append(items[i]);
    }
});
.list-item { cursor: pointer }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-layout-1">
</div>
<a href="#" class="button btn">
  Sort
</a>


附带说明,无需附加数组或循环,您只需
$('.button').on('click', function() {
    $('.news-layout-1 .list-item').sort(function(a, b) {
        var textA = $(a).html().toUpperCase();
        var textB = $(b).html().toUpperCase();
        return (textA > textB) ? -1 : (textA < textB) ? 1 : 0;
    }).appendTo('.news-layout-1');
});

09-09 22:42
查看更多