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

Question

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()">

js

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 accomplish 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.

Why not remove the onclick and put the show() inside the jQuery click handler? — Shaunak D
– 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
– talsibony, Commented May 4, 2015 at 5:41

talsibony · Accepted Answer · 2015-05-04 06:34:56Z

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 comment 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.com/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.net/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);
         });
    });
    });

Aftab Muni · Accepted Answer · 2015-05-04 05:51:36Z

1

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.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a id="click" onclick="first();show();">Click Me!</a>

answered May 4, 2015 at 5:51

Aftab Muni

1711 silver badge8 bronze badges

Comments

Ritesh Karwa · Accepted Answer · 2015-05-04 05:53:15Z

0

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()">

answered May 4, 2015 at 5:53

Ritesh Karwa

2,2641 gold badge15 silver badges17 bronze badges

Comments

Lupin · Accepted Answer · 2015-05-04 05:58:03Z

0

Why not have all functionality on the same event?

HTML

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

JS

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

   // continue here with other code
});

answered May 4, 2015 at 5:58

Lupin

1,26411 silver badges18 bronze badges

Comments

patricus · Accepted Answer · 2015-05-04 07:31:03Z

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.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related