find a location for property in a new city

Wednesday, 18 April 2012

jQuery - Don't use bind and definitely don't use live!

If you use jQuery you have almost certainly used the .click(fn) event. You may know that just calls .bind('click', fn). You may have used live(). You may know that live() is weird and buggy and inefficient. You may have heard you should not use it in favour of .delegate(). You may have heard of the new .on(). But which is better? bind vs live vs delegate vs on?

Take the following html:

<div id="myContainer">
    <input type="button" id="myBtn" value="Click me!" />
</div>
<script type="text/javascript>
    $('#myBtn').click(doSomething);
</script>

I have a button that has a javascript function called doSomething attached to it. This works fine until I dynamically replace the inner HTML of the div myContainer with a new button (with same ID etc). doSomething will no longer be attached to the new myBtn button so it will not be called when the button is clicked.

FYI, $('#myBtn').click(doSomething); is just shorthand for writing $('#myBtn').bind('click', doSomething);

So you can change the JavaScript code above to $('#myBtn').live('click', doSomething); and it will still work even when the button is brought in or generated dynamically. Up until now I have found that the live function uses magic to just make it all work even after ajax abuse and therefore it is better.

However, recently (in a more complex implementation) I found it was causing some undesired behaviour so I had a dig into it. Turns out live() is buggy and badly performing and has actually been deprecated as of jQuery v1.7 so do not use live! What should you be using for this type of functionality then?

Well, delegate has been the popular replacement since it attaches the method once to a selected container but still targets the inner element as bind or click would. The importance is two fold:

  1. The functionality is not wastefully attached to each element matched and instead just once to the containing element
  2. Dynamically added items that match the selector will still fire the event since the event is not attached to this element, it is attached to the container that has remained static

In fact live does the same as delegate but it's containing element cannot be defined, it is the whole document which, if you have a deep DOM, finding the originating element using the selector could cause it to search a long way. Lame... In fact, I found bugs with it and there are other details which mean you should use delegate instead. I say should because there is a new cool kid on the block.

So what is better than bind, live and delegate?

You should use .on(). All the cool kids are doing it. Want me to name drop users of on? Well, ME! Perhaps more famous in the JavaScript world is jQuery, and they use it! If you look at the jQuery library bind, live and delegate all just call on as of jQuery v1.7+

So my JavaScript code above should change to:

Bind and click are still fine in my opinion as nice little shortcuts but only when using it them to attach a function to one specific element and only when you are not attaching to dynamic objects. If you are attaching to, say, multiple <li>’s in a <ul> you should use on() instead to attach the event to the <ul> and target the event to the <li>’s. This way there is only one function and multiple references to it rather than creating the function once for each of the <li>’s.

Follow britishdev on Twitter

11 comments:

  1. Nice information many thanks to the author. It is incomprehensible to me now but in general the usefulness and significance is overwhelming. http://scarprin.net/

    ReplyDelete
  2. Thanks for making such a killer blog. I arrive on here all the time and am floored with the fresh information here! You are great!
    round dining tables for 4

    ReplyDelete
  3. This is one of the good articles you can find in the net explaining everything in detail regarding the topic. I thank you for taking your time sharing your thoughts and ideas to a lot of readers out there.
    Bridal Veil

    ReplyDelete
  4. Thanks for taking the time to discuss this I feel strongly about it and love learning more on this topic. If possible as you gain expertise would you mind updating your blog with more information? as it is extremely helpful for me.
    www.fadeplex.com

    ReplyDelete
  5. Up until now I have found that the live function uses magic to just make it all work even after ajax abuse and therefore it is better.

    ReplyDelete
  6. Why try to get web design that does not work if you can get one that attracts your website visitors by knowledgeable Web Designers in Kuwait at affordable prices? Are you looking for a Kuwait web designing services? Which can create a sole, globally look and pertinent web design structure with? 
    web designing services

    ReplyDelete
  7. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading what you all have to say...
    best weight loss supplements

    ReplyDelete
  8. Thanks for taking the time to discuss this I feel strongly about it and love learning more on this topic. If possible as you gain expertise would you mind updating your blog with more information? as it is extremely helpful for me.
    bad credit

    ReplyDelete
  9. I realise this is off topic but while your blog looks nice it would be far better if you'll be able to use lighter colors too in the design. This will encourage a lot more readers come to check it out more often!
    House Buyer San Antonio

    ReplyDelete