jQuery防止单击时传播行的子链接

Question

I have a table with classes on some of the rows. All the rows have links and when I click on the actual row I want to execute a function but prevent all of the links from being propagated.

Using e.stopPropagation() on my functions is working however one of the links has an onclick function and href=javascript:void(0); in it so it's just bypassing my e.stopPropagation statement and continues to run the procedures of the row-clicking function.

Here's my code:

$('[class*=tooltip-properties]').click(function() { // this is the table row
    // do stuff
});
$('[class*=tooltip-properties] a').click(function(e) {
    e.stopPropagation();
});

And the link causing trouble:

<a id="tageditlink25730" title="Edit" onclick="ame_ajax_form_tags(25730, 'LM');return false;" href="javascript:void(0);">

Answer 1

The piece of code bypassing your jQuery handlers is the onclick="... return false;" attribute.

jQuery will not override inline event handlers, and inline event handlers will be executed before any jQuery event handler (see Will JQuery override existing inline event handlers? ). This particular onclick handler will prevent the execution of any subsequent handlers, because it returns false .

If you have control over the server side code, you can remove the return false part in the generated page, or (even better) remove the onclick attribute and bind all your handlers using jQuery.

[Edit]

If you can't, one way is to add a child node inside the a tag, and bind a click handler on that new node :

$('[class*=tooltip-properties] a').each(function(){
    var html = $(this).html();
    $(this).html( '<span class="wrapper">'+html+'</span>' );
});

$('[class*=tooltip-properties] span.wrapper').click(function(){
    // do stuff
});