我先创建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');
});