Как сохранить прослушиватели событий после сортировки?

Question

Я создаю элементы DOM, а затем создаю массив объектов JQuery с этими элементами DOM. После сортировки объектов 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/

Answer 1

Вы очистки HTML, эффективно удаляя элементы из DOM, и они просто хранятся в памяти, где они теряют все связанные с ним данные и события.

jQuery также использует .empty() внутренне, когда вы делаете .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>

Как sidenote, нет необходимости в массиве или цикле для добавления, вы можете просто сделать

$('.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'); 
}); 

Answer 2

делегат события вместо прикрепления их в цикле for.

Когда действие click активировано, событие пузырится с родительским элементом (в данном случае элементом body), с которым связан обработчик кликов. Затем вы можете использовать e.target, чтобы получить точный li, где произошел щелчок.

$('body').on('click', '.list-item', function(e) { 
     alert($(e.target).data('i')); 
    }); 

    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); 

     // move the click event out of the for loop 
    }