Wednesday, 15 April 2015

Difference between bind(), live(), on(), delegate() in Jquery

.bind()

Syntax: .bind( eventType [, eventData ], handler )
Attach a handler to an event for the elements.
The .bind() method registers the type of event and an event handler directly to the DOM element. The .bind() doesn't work for elements added dynamically that matches the same selector. 

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

.live()

Attach an event handler for all elements which match the current selector, now and in the future.
Syntax: .live( events, handler )

Examples:

Example: Cancel a default action and prevent it from bubbling up by returning false.

1
2
3
$( "a" ).live( "click", function() {
  return false;
});

Example: Cancel only the default action by using the preventDefault method.

1
2
3
$( "a" ).live( "click", function( event ) {
  event.preventDefault();
});

Example: Use an object to bind multiple live event handlers. Note that .live() calls the click, mouseover, and mouseout event handlers for all paragraphs--even new ones.

1
2
3
4
$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});
In short: .bind() will only apply to the items you currently have selected in your jQuery object. .live() will apply to all current matching elements, as well as any you might add in the future.

.on()

Attach an event handler function for one or more events to the selected elements.
Syntax: .on( events [, selector ] [, data ], handler )

Example: Display each paragraph's text in an alert box whenever it is clicked:

1
2
3
$( "body" ).on( "click", "p", function() {
  alert( $( this ).text() );
});

Example: Cancel a link's default action using the .preventDefault() method.

1
2
3
$( "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:
1
2
3
$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});
is equivalent to the following code written using .on():
1
2
3
$( "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

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (10) Web Service (1) XMl (1)