JQuery не набирает элемент .class DOM

Question

Я хотел бы вызвать событие щелчка, когда на него нажимается конкретный элемент. Элементы пролетных фактически кнопки, которые находятся на вершине таблицы:

следующие работы:

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

Следующая не работает:

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

класс го элемента изменяется от сортировка в sorting_asc или sorting_desc, и я хотел бы вызвать конкретное событие в зависимости от того, на какой тип кнопки нажата.

UPDATE:

Интересно при просмотре источника я вижу только следующее:

<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 знает код последнего элемента.

(The JQuery плагин 'DataTables' отвечает за изменения кода)

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. Если это правильно, попробуйте что-то вроде этого (не тестировалось!):

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