Question

I have some mark-up like:

<th>Header <a class="uiFilter">Filter</a></th>

and some code like:

$('.uiGridHeader th').click(theadClick); however I want to say if its the anchor that is clicked then DON’T do the function! The trigger also needs to happen on the TH so I can’t add an addition span to add the trigger on.

I’ve had a look at the jquery not api but not quite sure how to use it when passing a function call inside the click method.

I also have some actions on the anchor link so any prevention needs to allow the anchor to still execute code!

Answer 1

Either prevent the click event from bubbling when the a element was clicked:

$('.uiGridHeader th a.uiFilter').click(function(event) {
    event.stopPropagation();
});

or test which element was clicked:

$('.uiGridHeader th').click(function(event) {
    if(event.target === this) {
        theadClick.call(this, event)
    }
});

Update: If you bind any event handlers with .live or .delegate, then you have to use the second approach as these methods do not bind the event handler to the element itself, but the some ancestor of the element (or the document root).

Update 2: If you have a more complicated nested structure, such as

<th><span>Header</span> <a class="uiFilter"><span>Filter</span></a></th>

you have to use some more jQuery trickery for the testing. For example, in the above case you could do:

$(event.target).closest('a.uiFilter', this).length === 0

This tests whether the clicked element is a.uiFilter itself or inside of it. The expression evaluates to true if not. The second parameter passed to closest restricts the search to the elements inside of this which is the table header element.