Question

所以，我遇到了一个排序列表的问题，我丢失了附加到列表项的任何事件处理程序。我知道如何使用我想要的w / e过滤器对列表进行排序很好，只是我无法弄清楚如何保留附加到每个列表元素的事件处理程序。那么，代码......

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'事件处理程序和一个'swiperight swipeleft'处理程序，这些在排序后会丢失并追加到dom。

我很确定我需要使用我已经存储在var事件中的$ ._数据方法......但不知道如何去做。谢谢你的帮助！

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>

和function 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")});

});

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

1 个答案:

来自jQuery源的原因