Question

我有一个可排序的表格，每列的顶部都有按钮。单击按钮时，列会按升序和降序排序。每次发生这种情况时，都会修改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>

我现在遇到的问题是，当我点击按钮时，上面的功能无法识别出该类已经改变。我已经确认，当我对列进行排序时，该类实际上正在更改，并且数据已正确排序。

就像一个例子，其中一个列作为排序列加载，因此将标记为sorting_asc等。当我单击另一个列排序按钮时，这会导致所有其他列变为.sorting，并且对于最近单击的列成为.sorting_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>'); 
    }
});

Answer 1

您使用的是错误的委派目标。而不是将事件委托给正在更改的元素，而是将事件委托给最近的静态父级。在这种情况下，包含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 () {...});

我的Jquery函数无法识别DOM中的更改

1 个答案: