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

Question

我想点击一个特定的span元素时触发一个click事件。跨度元素实际上是按钮，其是在桌子上：

以下工作：

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

下不起作用：

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

类从个元素的变化排序sort_asc或sorting_desc，我想触发一个特定的事件取决于哪种类型的按钮被点击。

UPDATE：

有趣的是，当我观看源I看到只有以下：

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

...但是，当I '检查元素' 通过萤火我看到：

<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插件 '数据表' 是负责更新的代码）

UPDATE：

最终代码：

$('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

修改代码以下列synatx：

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

注意到缺少“>”在你的问题，而不仅仅是一个空间。

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