jquery - Jquery点击没有在.class DOM元素上拾取

Question

我想在单击特定跨度元素时触发单击事件。span 元素实际上是位于表格顶部的按钮：

以下作品：

$("th > span").click(function() {
        alert('hi');
});

以下不起作用：

$("th.sorting > span").click(function() {
        alert('hi');
});

第 th 元素的类从排序更改为排序_asc 或排序_desc，我想根据单击的按钮类型触发特定事件。

更新：

有趣的是，当我查看源代码时，我只看到以下内容：

<th><span class = 'btn' style = 'width:90%'>Image<span id='i'></span></span></th>

...但是当我通过萤火虫“检查元素”时，我看到：

<th class="sorting" role="columnheader" tabindex="0" aria-controls="dispensers" rowspan="1" colspan="1" style="width: 187px; " aria-label="Image: activate to sort column ascending"><span class="btn" style="width:90%">Image<span id="i"></span></span></th>

我怀疑这不是我的问题的根源.. 因为我假设 Jquery 知道后一个元素代码。

（jquery 插件 'datatables' 负责更新代码）

更新：

最终代码：

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

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

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

外貌：

Answer 1

如果我正确理解了您的问题，那么您想确定是否需要根据 th 上的类执行升序或降序。如果这是正确的，那么尝试这样的事情（未测试！）：

$("th > span").click(function() {
     var th = $(this).parent("th"); 
     if($(th).hasClass("sorting")) {
       //do something
     } elseif($(th).hasClass("sorting_asc")) {
       // Sort ascending
       $(th).removeClass("sorting_asc");
       $(th).addClass("sorting_desc");
     } elseif($(th).hasClass("sorting_desc")) {
       // Sort descednding
       $(th).removeClass("sorting_desc");
       $(th).addClass("sorting_asc");
    }
});

Answer 2

$('th').on('click', '.sorting > span', function()
{
    alert('hi');
});

感谢$.on您可以将元素绑定到事件处理程序，以确保选择器的第二部分绑定更改 jQuery 是否会为您跟踪它们。

Answer 3

将您的代码修改为以下语法：

$("th.sorting span").click(function() {
    alert('hi');
});

请注意您的问题中缺少的“>”，而只是一个空格。