JQuery: live () and delegate ()

Question

I am attaching a click event to a div element that is created after a button is clicked. I use .live () and it works. I heard that I should not use .live, but .delegate (). So I tried this, but it does not work, but .live works.

My working jQuery:

$(".myDiv").live("click",function () { var Pos = $(this).offset(); $("#Container").css("left", Pos.left).css("top", Pos.top); }); 

JQuery does not work:

 $(".myDiv").delegate("div","click",function () { var Pos = $(this).offset(); $("#Container").css("left", Pos.left).css("top", Pos.top); }); 

My HTML for div

 <div class="myDiv"></div> 

Can someone tell me why the delegate is not working for me?

Answer 1

Your mistake is that you incorrectly specify which elements should trigger the event handler (using the selector in the first delegate parameter), and which parent element is responsible for disabling the event (using the selector in jQuery, the object that starts the chain).

The right way is something like

 $("body").delegate("div.myDiv","click",function () { var Pos = $(this).offset(); $("#Container").css("left", Pos.left).css("top", Pos.top); }); 

See examples for the delegate .

For jQuery 1.7 and above, the delegate (along with all other event binding methods) has been replaced with the on method, which will be used in exactly the same way:

 $('body').on('click','div.myDiv',function() { // ... }); 

Answer 2

Starting with version 1.7 .live() deprecated and .delegate() been replaced by . on ()

 $("body").on("click","div.myDiv",function () { var Pos = $(this).offset(); $("#Container").css("left", Pos.left).css("top", Pos.top); }); 

.on() now .on() ;)

Try to attach the closest thing to your goal, which will definitely contain it, preferably something with an identifier:

 <div id="mainContent"> <div class="myDiv"></div><!-- Dynamically created div --> </div> 

the great goal here is #mainContent

 $("#mainContent").on("click","div.myDiv",function () { var Pos = $(this).offset(); $("#Container").css("left", Pos.left).css("top", Pos.top); }); 

Answer 3

For now, you should switch to . on () if you are using 1.7+, here is the answer to your delegate question:

jQuery live () essentially associates an event handler with the entire widow.document object, which requests every event (corresponding to your type of event) if the source matches your selector. If that were the case, then it would start the handler. This allows you to handle events originating from dynamically added elements.

jQuery delegate () is similar to live (), except that you can specify a selector for the container, not just window.document.This means that you will interrogate the source of fewer events and therefore improve performance.

If you want to accurately reproduce the behavior of live () by going to delegate (),

 $(selector).live('eventType', handlerFunc); 

becomes:

 $(document).delegate(selector, 'eventType', handlerFunc); 

It is important to note that you are not typing anything by storing $ (document) in the delegate () call. You must change this selector to a more specific container where your dynamic elements will be created.