html + jquery ( Bind onclick event for execute action before onclick )

Question

I have a question about "event click" and "order of execution".

I make a example here ( The HTML is generated by a external javascript ) :

HTML :

<a href="#" id="comments-replybutton" onclick="alert('Action');return false;">Comment</a>​

JavaScript:

$(document).ready(function(){
    $('#comments-replybutton').click(function(){
        alert('2 attach event');
    });
});​

I want that when do click in "Comment" first execute the action of jquery (bind event).

Is this possible?

Answer 1

I believe you're looking for preventDefault() .
More here .

$(document).ready(function(){
    $('#comments-replybutton').click(function(e){
        e.preventDefault();
        alert('2 attach event');
    });
});​

Answer 2

$(document).ready(function(ev){
    $('#comments-replybutton').click(function(ev){
        alert('2 attach event');
        ev.stopPropagation();
    });
});​

You mean, like this?

Edit after comment

You can also name your function to unbind:

var myEventHandler = function myFunction(ev){
    $(this).unbind(myFunction);
    alert('attach event 2');
    ev.stopPropagation();
}
$('#comments-replybutton').bind('click', myEventHandler); 
// $(something).click(fn) is just a shorthand to $(something).bind('click', fn);

Edit 2

I guess you can kill off the original event easily, just by saying document.getElementById('comments-replybutton').onclick = "" or something similar. You can re-attach it by copying before:

var original_event_handler = $('#comments-replybutton')[0].onclick;
$('#comments-replybutton')[0].onclick = "";
$('#comments-replybutton').click(original_event_handler);

A bit dirty, but I'm too lazy to look it up :S preventDefault won't help you here, though.

http://jsfiddle.net/C37ka/

Answer 3

try this:

$(document).ready(function(){
    $('#comments-replybutton').unbind('click').click(function(){
        alert('2 attach event');
    });
});​

and if you need also to execute the inline statement at the end, you will need something like this:

$(document).ready(function(){
    var initialEvent = $('#comments-replybutton')[0].onclick;
    $('#comments-replybutton').click(function(){
        alert('2 attach event');
    }).click(initialEvent);
});​