CODEWITHSUNDEEP
jquery
Cameron
Cameron

Reputation: 28843

jQuery header click BUT not an anchor inside

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!

Upvotes: 0

Views: 277

Answers (2)

Felix Kling
Felix Kling

Reputation: 816770

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.

Upvotes: 4

James Allardice
James Allardice

Reputation: 166021

You can bind a click event handler to the a and stop the propagation of the event:

$(".uiFilter").click(function(e) {
    e.stopPropagation();
});

That will stop the event from bubbling up to the th element, which in turn means that any click event handlers bound to that (or any other ancestor elements) will not be executed.

Upvotes: 1

Related Questions