Jquery click not picking up on .class DOM element
<p>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:</p>

<p>The following works:</p>

<pre><code>$("th &gt; span").click(function() {
        alert('hi');
});
</code></pre>

<p>The following does not work:</p>

<pre><code>$("th.sorting &gt; span").click(function() {
        alert('hi');
});
</code></pre>

<p>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.</p>

<p>UPDATE:</p>

<p>Interestingly when I view source I see only the following:</p>

<pre><code>&lt;th&gt;&lt;span class = 'btn' style = 'width:90%'&gt;Image&lt;span id='i'&gt;&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;
</code></pre>

<p>...but when I 'inspect element' through firebug I see:</p>

<pre><code>&lt;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"&gt;&lt;span class="btn" style="width:90%"&gt;Image&lt;span id="i"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;
</code></pre>

<p>I suspect this isn't the root of my problem though.. as I'm assuming Jquery is aware of the latter element code.</p>

<p>(The jquery plugin 'datatables' is responsible for the updated  code)</p>

<p>UPDATE:</p>

<p>Final code:</p>

<pre><code>$('th').on('click', '.sorting &gt; span', function() {
        $("span#i").html('');
    jQuery("span#i", this).html(' &lt;i class=\"icon-chevron-up\"&gt;&lt;/i&gt;');
    });

$('th').on('click', '.sorting_asc &gt; span', function() {
        $("span#i").html('');
    jQuery("span#i", this).html(' &lt;i class=\"icon-chevron-down\"&gt;&lt;/i&gt;');
    });

$('th').on('click', '.sorting_desc &gt; span', function() {
        $("span#i").html('');
    jQuery("span#i", this).html(' &lt;i class=\"icon-chevron-up\"&gt;&lt;/i&gt;');
    });
</code></pre>

<p>Appearance:</p>

<p><img src="http://i.stack.imgur.com/DjKaQ.png" alt="enter image description here"></p>
