I am performing DOM manipulation on a page where I don’t have access to the source code. I would simply like to prevent a link’s onClick handler from executing, add my own unrelated function then allow the original onClick function to execute as normal. Here is an example of the page code:

<a href="#" onclick="myAjaxFunction('param1, param2');return false;" name="buyLink" id="buyLink" >Buy Now</a>

I have e up with the code framework below:

jQuery('#buyLink').click(function(event){
    event.preventDefault();
    my2ndFunction(); // alert(‘I ran’);
    //execute myAjaxFunction() here
});

I have two challenges:

1) When I use the Alert() code to test this out, the alert appears but the original function runs anyway (preventDefualt doesn’t seem to be working).

2) How do I call the original function plete with the correct dynamic parameter values? (maybe using “self” in some way?)

I am performing DOM manipulation on a page where I don’t have access to the source code. I would simply like to prevent a link’s onClick handler from executing, add my own unrelated function then allow the original onClick function to execute as normal. Here is an example of the page code:

<a href="#" onclick="myAjaxFunction('param1, param2');return false;" name="buyLink" id="buyLink" >Buy Now</a>

I have e up with the code framework below:

jQuery('#buyLink').click(function(event){
    event.preventDefault();
    my2ndFunction(); // alert(‘I ran’);
    //execute myAjaxFunction() here
});

I have two challenges:

1) When I use the Alert() code to test this out, the alert appears but the original function runs anyway (preventDefualt doesn’t seem to be working).

2) How do I call the original function plete with the correct dynamic parameter values? (maybe using “self” in some way?)

• javascript
• jquery

2 Answers 2

First, back up the original onclick handler. Then, remove it from the element. Finally, create your own handler. In your handler, call the original function.

var orig_onclick = $('#buyLink').prop('onclick');
$('#buyLink').removeProp('onclick');

$('#buyLink').click(function(e){
    // Do your own code
    my2ndFunction();

    // Call the original function, with the correct context.
    return orig_onclick.call(this, e.originalEvent);
});

DEMO: http://jsfiddle/qbz7wn9o/

Here is a way to achieve this without storing the onclick event.

var button = document.querySelector("button");

// add your listener
button.addEventListener("click", function(event) {
  alert("listener action");
  // calling stopImmediatePropagation here will prevent the inline action...
  // ...from executing once it's moved to afterwards in the queue
  //event.stopImmediatePropagation();
});

// move the inline listener to execute after yours
if (button.onclick !== null) {
  button.addEventListener("click", button.onclick);
  button.onclick = null;
}

<button onclick="alert('inline action');">click me</button>