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 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()">
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 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.
Share Improve this question edited May 4, 2015 at 6:14 Sindhoo Oad asked May 4, 2015 at 5:30 Sindhoo OadSindhoo Oad 1,1942 gold badges13 silver badges31 bronze badges 17- 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
onclickand put theshow()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
5 Answers
Reset to default 3onclick 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" >
JS
$(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.