My Jquery function is not recognizing changes in DOM
<p>I have a sortable table with buttons on top for each column. When you click the button the column sorts ascending and descending. Each time this occurs the th class is modified to represent the current state, th.sorting, th.sorting_asc, and th.sorting_desc ... The below code is used to update the sorting arrow:</p>

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

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

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

<p>Here is an example of the code I am trying to apply the above function on:</p>

<pre><code>&lt;th class="sorting"&gt;&lt;span&gt;Device&lt;span id="i"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;
</code></pre>

<p>The problem I am having now is that when I click on the button the functions above aren't recognizing that the th class has changed. I have verified that the class is in fact changing when I sort the column, and the data is sorted properly.</p>

<p>Just as an example, one of the columns loads as the sorted column, and so will be marked sorting_asc, etc.. When I click another column sorting button this causes all other columns to become .sorting, and for the recently clicked to become .sorting_asc ... but somehow even when I click the original column (when it's class is .sorting) I am still getting an alert saying "sorting_asc"</p>

<p>I fixed it with:</p>

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

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

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