Jquery点击没有选择.class DOM元素

Question

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

以下作品：

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

以下不起作用：

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

th元素的类从排序更改为sorting_asc或sorting_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').on('click', '.sorting > span', function()
{
    alert('hi');
});

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

Answer 2

将代码修改为以下语法：

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

记下缺少的'＆gt;'就像在你的问题中而只是一个空格而已。

Answer 3

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

$("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");
    }
});