Question

I would like to trigger a click event when a particular span element is clicked on. The span elements are actually buttons which are on top of a table:

The following works:

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

The following does not work:

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

The class of the th element changes from sorting to sorting_asc or sorting_desc, and I would like to trigger a particular event depending on which type of button is clicked on.

UPDATE:

Interestingly when I view source I see only the following:

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

…but when I ‘inspect element’ through firebug I see:

<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>

I suspect this isn’t the root of my problem though.. as I’m assuming Jquery is aware of the latter element code.

(The jquery plugin ‘datatables’ is responsible for the updated code)

UPDATE:

Final code:

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

Appearance:

Answer 1

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

Thanks to $.on you can bind elements to event handlers making sure if the second part of the selector for the binding changes jQuery will track them for you.