Hello Readers,
.bind() vs .live() vs .delegate() vs .on() all these 4 are jquery methods and all are used for attaching events to selectors (elements).
- .bind(): bind() method is the jquery method and it is one of the easiest and quick method in jquery to bind events. It's only attach events to the current elements not on future elements. But the issue about the bind() method is that it doesn't work for elements added dynamically. And, its performance is low when dealing with a large selection.
Syntax :
$(selector).bind(event,data,function,map)
Parameter :
event : it's a required parameter which specifies one or more events to attach to the elements.(Multiple event values are separated by space.)
data : it's a optional parameter which specifies additional data to pass along to the function.
function : it's also a required parameter which specifies the function to run when the event occurs.
Code Example :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click", function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
- .live():
live() is also a another jquery method and this method overcomes the disadvantages of bind() method. It's basically work for current and future elements.
But the live() method is depreciated in jquery version 1.7 and removed in version 1.9.(because of it's poor performance on large pages).
Syntax :
$(selector).live(event,data,function)
Code Example :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").live("click", function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click me!</button>
</body>
</html>
- .delegate():
delegate() is also a jquery method and work as simlilar to the live() method. And it also work for the element in current as well as future elements, and it attach one or more event handlers for specified elements that are children of selected elements and call the function when the events has occur. And, it is also supports chaining.
Syntax:
$(selector).delegate(childSelector,event,data,function)
Parameter:
childSelector: it's a required parameter which specifies one or more child elements to attach the event handler to.
Code Example :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").delegate("p", "click",function(){
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<div style="background-color:yellow;">
<p>This is a paragraph inside a div element.</p>
</div>
<p>This is a paragraph.</p>
</body>
</html>
- .on():
on() method is also a jquery method and it is used to overcome the live() method because live() was depreciated with jquery version 1.7 so the new method was introduced names as on() method. This method provides all the goodness of all the previous methods (above 3 methods) and it makes uniformity for attaching event handlers (selected elements and child elemnets).
It's basically the replacement of bind() live() and delegate() method. And it also work on current as well as future elements.
If you want to remove event handlers, use the off() method.
Syntax :
$(selector).on(event,childSelector,data,function,map)
Code Example :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click this paragraph.</p>
</body>
</html>
0 Comment(s)