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

3 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. This comment has been removed by the author.

    ReplyDelete
  3. Bệnh viêm gan b lây qua đường nào ?Viêm gan B là căn bệnh lây lan lặng lẽ, tiến triển âm thầm do virus viêm gan B(HBV) gây ra, đây là một trong những bệnh được cảnh báo vô cùng nguy hiểm.
    Cách rửa mũi cho trẻ sơ sinhThời tiết thay đổi đột ngột rất dễ làm trẻ mắc các bệnh về mũi, họng. Lúc này, mẹ cần vệ sinh mũi cho bé thường xuyên để điều trị chứng viêm mũi, đồng thời phòng cách bệnh về đường hô hấp
    Dấu hiệu nhận biết người bị nhiễm hivNói suy giảm miễn dịch mắc phải có nghĩa là quá trình này xảy ra trong khoảng thời gian sống của con người, không phải do di truyền hay bệnh bẩm sinh của hệ miễn dịch.
    Mới bị nhiễm hiv có chữa được không?Để giúp các bạn hiểu rõ hơn về bệnh hiv, sau đây bài viết xin chia sẻ đến một số thông tin hữu ích về bệnh, cùng tìm hiểu nhé!
    Que thử thai hai vạch đậm có chính xácDùng que thử thai ngay tại nhà là biện pháp nhằm phát hiện hCG trong nước tiểu. Đây là hormone đầu tiên có mặt sau khi trứng thụ tinh nằm trong tử cung (khoảng 6 ngày sau thụ tinh)
    Dùng que thử thai chip chip có chính xác không?Thị trường que thử thai tại Việt Nam khá đa dạng. Phổ biến và thông dụng nhất với chị em phụ nữ là thương hiệu Quick Stick.
    Thụ tinh trong ống nghiệm là gì hết bao nhiêu tiền?Hầu hết chúng ta, nhất là những cặp đôi trẻ và khoẻ mạnh đều nghĩ rằng chúng ta có thể thụ thai tự nhiên và sinh con khi chúng ta muốn. Nhưng không phải lúc nào cũng đơn giản như vậy
    Bệnh thuỷ đậu phải kiêng những gì?Nếu không biết điều này, bệnh tình sẽ trở nên trầm trọng hơn, thậm chí có thể gây tổn thương thần kinh ung ương, ung thư da hay tử vong.
    Trẻ em bị bệnh thuỷ đậu nên ăn gì?Bệnh thủy đậu đang vào mùa và trẻ em là đối tượng dễ bị nhiễm bệnh nhất do khả năng miễn dịch yếu.
    Tuổi dậy thì của con gái là gì?Tuổi dậy thì là một giai đoạn quan trọng trong cuộc đời một con người, trong giai đoạn này có nhiều biến động về tâm sinh lý ở trẻ.
    Tác dụng của hạt sen tươi và hạt sen khôHạt sen là một thực phẩm được rất nhiều người yêu thích. Tuy nhiên, không phải ai cũng biết và khám phá hết những công dụng tuyệt vời của hạt sen.

    ReplyDelete