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