CODEWITHSUNDEEP
jquery
Abram
Abram

Reputation: 41844

Jquery .on('click') function

I have the following:

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

This code used to work, but I have made a few changes to my site, and now it's not working. Here is an example of the code I am trying to apply the above function on:

<th style="text-align: center; width: 381px; " class="sorting" role="columnheader" tabindex="0" aria-controls="devices" rowspan="1" colspan="1" aria-label="Device: activate to sort column ascending"><span class="btn btn-mini" style="width: 100px">Device<span id="i"></span></span></th>

Here is an image of the button link and an Xray analysis:

enter image description here

EDIT: Ok, now some really insteresting stuff is happening! When I wrap the above code in $(document).ready( function () {} I finally see the alert when I click on the sorting column. However, when the sorting column is clicked on the th class changes to "sorting_asc"... but when I click on the button again, I still see the same alert... Obviously wrapping in document ready means jquery isn't aware of the updated DOM CSS. So, what might be causing the function outside of the document ready function to stop working?

Upvotes: 0

Views: 795

Answers (2)

weexpectedTHIS
weexpectedTHIS

Reputation: 3376

The problem is you are using the selector ".sorting > span" when you really mean "span". The ".sorting" part will not apply to the element you have selected first.

$('th.sorting').on('click', 'span', function() {
  alert("hello world");
});

Upvotes: 0

Ram
Ram

Reputation: 144659

In your markup th element has no descendant element with class of sorting and your jQuery selector doesn't select any element, you should code:

$('th.sorting').on('click', 'span', function() {
    alert("hello world");
})

Upvotes: 3

Related Questions