javascript - why click event is fired first called by onclick on element, rather than $(document).on('click')? -

In my application I have alot of anchor tags and buttons and most of them have event called by onclick on the element.

what I want is to call a function before any other functions are called.

html

<input type="button" value="add" onclick="add()">
<input type="button" value="sub" onclick="sub()">
<input type="button" value="div" onclick="div()">

function add(){
alert("add");
}
function sub(){
alert("sub");
}
function div(){
alert("div");
}

$(document).on("click","input[type=button]",function(){
alert("bye");
});

here is the fiddle fiddle

I supposed that

$(document).on("click","input[type=button]",function(){
....
});

will be called first so that I can process something before

function show(){
    alert("hi");
    }

is called , but that is not true. what should do to acplish this.

I want to call a function on all anchor tags and buttons, even before the

onclick="show()"

Update

I have updated the fiddle

P.S

each element have its own function to call , but the function in $(document) is same which i want to call on all element filtered by. I have suggestions that why not to make a function having logic of $(document) I have and call it on all functions called by elements i.e add(),sub(),div(). But ans is no I can not , because it is just a demo my real application is quit large and cannot figure each function and call other function. thats why I want an alternative.

In my application I have alot of anchor tags and buttons and most of them have event called by onclick on the element.

what I want is to call a function before any other functions are called.

html

<input type="button" value="add" onclick="add()">
<input type="button" value="sub" onclick="sub()">
<input type="button" value="div" onclick="div()">

function add(){
alert("add");
}
function sub(){
alert("sub");
}
function div(){
alert("div");
}

$(document).on("click","input[type=button]",function(){
alert("bye");
});

here is the fiddle fiddle

I supposed that

$(document).on("click","input[type=button]",function(){
....
});

will be called first so that I can process something before

function show(){
    alert("hi");
    }

is called , but that is not true. what should do to acplish this.

I want to call a function on all anchor tags and buttons, even before the

onclick="show()"

Update

I have updated the fiddle

P.S

Share Improve this question edited May 4, 2015 at 6:14 asked May 4, 2015 at 5:30 Sindhoo Oad 1,1942 gold badges13 silver badges31 bronze badges

more explain your question?it is not clear – ashkufaraz Commented May 4, 2015 at 5:37
your fiddle should be jsfiddle/qmbcgz5y/5 – talsibony Commented May 4, 2015 at 5:39
@talsibony yes I made changes – Sindhoo Oad Commented May 4, 2015 at 5:39
Why not remove the onclick and put the show() inside the jQuery click handler? – Shaunak D Commented May 4, 2015 at 5:41
the onclick attr on the element will be first because it direct event on the element and when you attached the event to the document it first trigger on the document and then it check if it matches the ID you defined – talsibony Commented May 4, 2015 at 5:41

| Show 12 more ments

5 Answers 5

Sorted by: Reset to default 3

onclick attr will be called first because its direct event on the element this is how it is but you can make some manipulations on the events from the function itself here is a way you can achieve what you want but as I said in my ment is a bit messy:

<!DOCTYPE HTML>
<html ng-app>
  <head>      
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="//ajax.googleapis./ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script>
  <title></title>
  </head>
  <body>
  <a id="click" onclick="show(this);">c</a>
  <script type="text/javascript">
  function show(t){
    events = $._data(document, 'events');
    events.click[0].handler();
    alert("hi");
    $(document).off("click","#click");
}

$(document).on("click","#click",function(){
  alert("bye");
});
</script>
  </body>
</html>

basicly what you do here is to call other handlers before you execute your onclick function logic on in other words you call other handlers from the onclick this code works but you should use some filters for the events you are looking for and run in a loop on each event

another way you can do it you can save the onclick value and attached it in the your own event and then remove the onclick attr val:

http://jsfiddle/qmbcgz5y/11/

function add(){
alert("add");
}
function sub(){
alert("sub");
}
function div(){
alert("div");
}
function firstfunction(){alert('first func');}

    $(function(){
        $("input[type=button]").each(function(){
          var onclickfunc = $(this).attr('onclick');
          $(this).attr('onclick','');
          $(this).on('click',function(){
           firstfunction();
           eval(onclickfunc);
         });
    });
    });

You can use the simple solution by calling 2 methods on onclick() event as given below:

function show(){
alert("hi");
}

function first(){
alert("bye");
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a id="click" onclick="first();show();">Click Me!</a>

javascript code

function show() {
  function_two(); // considering the next alert, I figured you wanted to call function_two first
  alert("hi");
}

function function_two() {
  alert("bye");
}

html code

<input type="button" value="click" onclick="show()">

Why not have all functionality on the same event?

HTML

<input type="button" value="click" >

$(document).on("click","input[type=button]",function(){
   // call first function
   callToFirstFunction();

   // continue here with other code
});

You're running into capturing vs. bubbling event handling, which is very well explained here.

If you don't care about IE <= 8, you can just assign the event handler on the document to execute in the capturing phase. However, you must assign the event handler using the addEventListener() method, as this cannot be done through jQuery.

// third parameter must be true to set event to capturing phase
document.addEventListener('click', function(event) {
    // get the real target of the click event
    $target = $(event.target);

    // if it was a button, do your work
    if ($target.is('input[type="button"]')) {
        alert("bye");
    }
}, true);

If you do need to support IE <= 8, then one of these other workarounds will be needed.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - why click event is fired first called by onclick on element, rather than $(document).on('click')? -

5 Answers 5

与本文相关的文章

评论列表(0)