bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector condition is satisfied for an event afterward, bind() will not work on that function. It also won’t work in the case if selector condition is removed from the element.
<script>
$("#foo").bind("mouseenter mouseleave", function () {
$(this).toggleClass("entered");
});
$("#foo2").bind({
click: function () {
// Do something on click
},
mouseenter: function () {
// Do something on mouseenter
}
});
$("#foo").bind("click", function () {
alert($(this).text());
});
</script>
on() method: This method attaches events not only to existing elements but also for the ones appended in the future as well. The difference here between on() and live() function is that on() method is still supported and uses a different syntax pattern, unlike the above two methods.
$( "body" ).on( "click", "p", function() {
alert( $( this ).text() );
});
//Cancel a link's default action using the .preventDefault() method.
$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
});
.delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
Syntax: .delegate( selector, eventType, handler )
For example, the following .delegate() code:
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
is equivalent to the following code written using .on():
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});
The .delegate() method is very powerful, The difference between .live() and .delegate() is, live function can't be used in chaining. live function needs to be used directly on a selector/element. Also .delegate() works on dynamically added elements to the DOM where the selectors match. Chaining is supported correctly in .delegate().
0 comments:
Post a Comment