CODEWITHSUNDEEP
javascriptjquery
Sindhoo Oad
Sindhoo Oad

Reputation: 1194

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

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.

Upvotes: 3

Views: 6675

Answers (5)

patricus
patricus

Reputation: 62348

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.

Upvotes: 0

talsibony
talsibony

Reputation: 8766

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);
         });
    });
    });

Upvotes: 3

Lupin
Lupin

Reputation: 1244

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
});

Upvotes: 0

Ritesh Karwa
Ritesh Karwa

Reputation: 2254

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

Upvotes: 0

Aftab Muni
Aftab Muni

Reputation: 171

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>

Upvotes: 1

Related Questions