0

我有一个可排序的表格，每列的顶部都有按钮。单击按钮时，列按升序和降序排列。每次发生这种情况时，都会修改 th 类以表示当前状态，th.sorting、th.sorting_asc 和 th.sorting_desc ... 下面的代码用于更新排序箭头：

  $('th.sorting').on('click', 'span', function() {
    alert("sorting");
    $("span#i").html('');
    jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>');
    });

  $('th.sorting_asc').on('click', 'span', function() {
    alert("sorting_asc");
    $("span#i").html('');
    jQuery("span#i", this).html(' <i class=\"icon-chevron-down\"></i>');
    });

  $('th.sorting_desc').on('click', 'span', function() {
    alert("sorting_desc");
    $("span#i").html('');
    jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>');
  });

这是我尝试将上述功能应用于的代码示例：

<th class="sorting"><span>Device<span id="i"></span></span></th>

我现在遇到的问题是，当我单击按钮时，上面的功能没有识别出 th 类已更改。我已经验证，当我对列进行排序时，该类实际上正在发生变化，并且数据已正确排序。

举个例子，其中一列加载为已排序的列，因此将被标记为 sort_asc 等。当我单击另一列排序按钮时，这会导致所有其他列变为 .sorting，而最近单击的列变为 . sort_asc ...但不知何故，即使我单击原始列（当它的类是.sorting时）我仍然收到一个警报，说“sorting_asc”

我修复了它：

$("th > span").click(function() {
     var th = $(this).parent("th"); 
     if($(th).hasClass("sorting")) {
       $("span#i").html('');
       jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>');
     } 

     if($(th).hasClass("sorting_asc")) {
       $("span#i").html('');
       jQuery("span#i", this).html(' <i class=\"icon-chevron-down\"></i>'); 
     } 

     if($(th).hasClass("sorting_desc")) {
       $("span#i").html('');
       jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>'); 
    }
});
4

1 回答 1

0

您使用了错误的委派目标。与其将事件委托给正在改变的元素，不如将事件委托给最近的静态父元素。在这种情况下，包含table似乎是一个合理的选择：

$('.class-of-the-table').on('click', 'th.sorting span', function () {...})
    .on('click', 'th.sorting_asc span', function () {...})
    .on('click', 'th.sorting_desc span', function () {...});
于 2012-09-09T07:40:56.550 回答