绕过onclick事件，执行某些代码后，恢复onclick

Question

I have the below html button which have onclick event

<button onclick="alert('button');" type="button">Button</button>

and the following js:

$('button').on('click', function(){
    alert('jquery');
});

After executing some js code by jQuery/Javascript, i want to continue with the button onclick handler eg: jquery alert first and than button alert.

i tried so many things like "remove attr and append it after executing my code and trigger click (it stuck in loop, we know why :) )" and "off" click. but no luck.

is it possible via jQuery/javascript?

any suggestion much appreciated

Thanks

Answer 1

Create a separate javascript function that contains what you want to do when the button is clicked (ie removing the onclick attribute and adding replacement code in its own function).

Then call that function at the end of

$('button').on('click', function(){
    alert('jquery');
});

So you'll be left with something like this

function buttonFunction()
{
  //Do stuff here
}

$('button').on('click', function()
{
  alert('jquery');
  buttonFunction();
});

<button type="button">Button</button>

Answer 2

A little bit tricky. http://jsfiddle.net/tarabyte/t4eAL/

$(function() {
    var button = $('#button'),
        onclick = button.attr('onclick'); //get onclick value;

    onclick = new Function(onclick); //manually convert it to a function (unsafe)

    button.attr('onclick', null); //clear onclick
    button.click(function() { //bind your own handler
        alert('jquery');
        onclick.call(this); //call original function
    })
});

Though there is a better way to pass params. You can use data attributes.

<button data-param="<%= paramValue %>"...

Answer 3

You can do it this way:

http://jsfiddle.net/8a2FE/

<button type="button" data-jspval="anything">Button</button>

$('button').on('click', function () {

    var $this = $(this),                //store this so we only need to get it once
        dataVal = $this.data('jspval'); //get the value from the data attribute

    //this bit will fire from the second click and each additional click
    if ($this.hasClass('fired')) {

        alert('jquery'+ dataVal);
    }
    //this will fire on the first click only
    else {

        alert('button');

        $this.addClass('fired'); //this is what will add the class to stop this bit running again
    }

});