title: How do I preserve event listeners after sort?
body: <p>I'm creating DOM elements then creating an array of JQuery objects with those DOM elements. After sorting the JQuery objects and re-appending them, the click event listener is gone. Is there a way to preserve the click listener?</p>
  
  <pre><code>for(var i=0; i&lt;5; i++){
      var div = $('&lt;div&gt;',{
      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 &gt; textB) ? -1 : (textA &lt; textB) ? 1 : 0;
    });
  
    $('.news-layout-1').html('');
  
    for(var i=0; i&lt;items.length; i++){
      $('.news-layout-1').append(items[i]);
    }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/bhav4co6/5/" rel="nofollow">http://jsfiddle.net/bhav4co6/5/</a></p>