jquery - 使用 jQuery 对 li 和事件处理程序进行排序

Question

因此，我在对列表进行排序时遇到问题，我丢失了附加到列表项的任何事件处理程序。我知道如何使用我想要的过滤器对列表进行排序，只是我不知道如何保留附加到每个列表元素的事件处理程序。所以，代码...

HTML

<ul id="classes">
    <li class="class_2" date-created="Sat Jan 04 2014 20:46:55 GMT-0500 (EST)">Calc 152<di class="class_list_arrow"></di></li>
    <li class="class_3" date-created="Mon Jan 06 2014 21:26:59 GMT-0500 (EST)">Phys 133<di class="class_list_arrow"></di></li>
</ul>

排序 JS

function ascending (){
    var rows = $('#classes li').get();

    rows.sort(function(a, b) {

      var A = new Date($(a).attr('date-created')).getTime();
      var B = new Date($(b).attr('date-created')).getTime();

      //var events = $._data($(a).get(0), "events");
      //alert(JSON.stringify(events));

      if(A < B) {
        return -1;
      }

      if(A > B) {
        return 1;
      }

      return 0;     
   });

    $('#classes').html('');
    $.each(rows, function(index, row) {
             $('#classes').append(row);
    });
}

所以...这就是我被困住的地方。我可以获得 attr。 date-created 很好，并按照我需要的方式进行排序，但在每个 li 元素上，我都有一个“tap”事件处理程序和一个“swiperright swipeleft”处理程序，这些在排序后会丢失并附加回 dom。

我很确定我需要使用我存储在 var events 中的 $._data 方法...但不知道如何去做。感谢您的帮助!

Answer 1

给定这个 html

<ul id="classes">
  <li class="l_3" data-doc="Mon Jan 06 2014 22:26:59 GMT-0500 (EST)">a</li>
  <li class="l_1" data-doc="Sat Jan 04 2014 20:46:55 GMT-0500 (EST)">b</li>
  <li class="l_2" data-doc="Mon Jan 06 2014 21:00:09 GMT-0500 (EST)">c</li>         
</ul>
<button onclick="SortAscending()">sort</button>

和函数SortAscending()如下所示:

function SortAscending ()
{    
    var rows = $('#classes li').get();
    rows.sort(function(a, b) {
          var A = new Date($(a).attr('data-doc')).getTime();
          var B = new Date($(b).attr('data-doc')).getTime();
          if(A < B) { return -1; }
          if(A > B) { return 1; }
          return 0;     
    });

    $.each(rows, function(index, row) {
             $('#classes').append(row);
    });    
}

每个事件处理程序都保持附加状态。

来自 jQuery 源码的原因

如A. Wolff 指出 $('#classes').html('') 部分是罪魁祸首。在 html() 函数的 jQuery-Source 中，有这样的内容:

 if ( typeof value === "string" .... )
 {
    ...
    for (; i < l; i++ )
    {
       // Remove element nodes and prevent memory leaks
       elem = this[i] || {};
       if ( elem.nodeType === 1 )
       {
          jQuery.cleanData( getAll( elem, false ) );
          elem.innerHTML = value;
       }
    }
 }

因此，调用 $('#classes').html('') 会被评估为传递字符串并清除所有附加的处理程序。

我用这段代码测试了它是否仍然附加了处理程序。

$( document ).ready(function() {
    $(".l_1").on("click", function(){ alert("item 1")});
    $(".l_2").on("click", function(){ alert("item 2")});
    $(".l_3").on("click", function(){ alert("item 3")});

});