Sdílet prostřednictvím

jQuery Tips: bind() or live()?

  • Článek

I get asked very often when to use the jQuery bind() and live() event methods. By definition, bind() will bind a handler to one or more events for each matched element currently exists, at the time the call is made; whereas live() uses event delegation to bind a handler to an event for all current and future matched elements.

live() works by attaching your event handler to the document, not just to the element. For example, when you click on a button, that button might exist in a <p>, in a <div>, in a <body> element; so in effect, you're actually clicking on all of those elements at the same time. It then looks back up the line of elements targeted by the event and checks to see if any of them match your query.

Code examples are always helpful to understand the difference.  Here are two sample code which are almost the same, the only difference is the first one uses bind() and the second one uses live().

.bind() example

Code Snippet

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   p { background:yellow; font-weight:bold; cursor:pointer;
  6.       padding:5px; }
  7.   p.over { background: #ccc; }
  8.   span { color:red; }
  9.   </style>
  10.   <script src="https://code.jquery.com/jquery-1.4.4.js"></script>
  11. </head>
  12. <body>
  13.   <p>Click me!</p>
  14.  
  15.   <span></span>
  16. <script>
  17.     $("p").bind("click", function () {
  18.         $(this).after("<p>Another paragraph! Click Me and see what happen. </p>");
  19.     });
  20. </script>
  21.  
  22. </body>
  23. </html>

You will see the following response in the browser. In the code above, when the user clicks on the paragraph, a new <p> paragraph will be created beneath it. Clicking on the newly created paragraph will not replicate the functionality.

bindResponse

Now, we will try live() method.  Just replace .bind with .live.

.live() example

Code Snippet

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   p { background:yellow; font-weight:bold; cursor:pointer;
  6.       padding:5px; }
  7.   p.over { background: #ccc; }
  8.   span { color:red; }
  9.   </style>
  10.   <script src="https://code.jquery.com/jquery-1.4.4.js"></script>
  11. </head>
  12. <body>
  13.   <p>Click me!</p>
  14.  
  15.   <span></span>
  16. <script>
  17.     $("p").live("click", function () {
  18.         $(this).after("<p>Another paragraph! Click Me and see what happen. </p>");
  19.     });
  20. </script>
  21.  
  22. </body>
  23. </html>

You will see the following response in the browser.  In the code above, the user can now click on any of the paragraph, and a new <p> paragraph will be created beneath it. The only difference is live() method is used here.

liveResponse

With live() method, it means that you don't have to continue reapplying events to new elements, since they'll be implicitly added when the event happens. More importantly, it means that your code can be much lighter and more maintainable. You can use this technique for animation, games to make your application more visually appealing.

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. If you have controls that aren’t rendered dynamically, use bind(). If you have controls that are rendered dynamically, use live().

Caveats (to be aware)

The .live() technique is useful, but due to its special approach cannot be simply substituted for .bind() in all cases. Specific differences include:

  • DOM traversal methods are not supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector, as in the example above.
  • To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
  • As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble.
  • As of jQuery 1.4.1 even focus and blur work with live (mapping to the more appropriate, bubbling, events focusin and focusout).
  • As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

Comments

  • Anonymous
    July 16, 2011
    Thanks for share ! I have other demo example about bind() and live(). Please you visit my Blog codeoop.com/.../demo-bind-live-with-jquery

  • Anonymous
    September 22, 2011
    Hi…. Thanks for sharing this information and resources its really help full for me with the  help of this we can improve our designs and development I really inspire with this information thanks <a href="http://www.chetaru.com">Web Design Company India</a>

  • Anonymous
    May 11, 2012
    It really helpful for who all are willing to know the difference between live and bind. Good Knowledge share

  • Anonymous
    July 10, 2013
    Thanks for clarifying this.  Live()  seems to be appropriate when you are adding elements dynamically.