jQuery: live() and delegate()

Question

I'm binding a click event to a div element, which is created after clicking on a button. I'm using .live() and this is working. I've heard, that I should not use .live, but .delegate(). So I've tried it, but it is not working, but .live is working.

My working jQuery:

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

The not working jQuery:

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

My HTML for the div

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

Can anyone tell me, why delegate is not working for me?

Sinetheta · Answer 1 · 2012-01-10T16:13:25.067

As of 1.7 .live() has been deprecated and .delegate() has been superseded by .on()

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

.on() is the super binder now ;)

Try to bind to the closest thing to your target which will definitely contain it, preferably something with an ID:

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

a great target here would be #mainContent

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

score 4 · Accepted Answer · answered Jan 10 '12 at 16:06

Your mistake is that you are not correctly specifying which elements should trigger the event handler (using the selector in the first parameter of delegate) and which parent element is responsible for firing off the event (using the selector in the jQuery object which starts the chaining).

The correct way is something like

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

See the examples for delegate.

For jQuery 1.7 and upwards, delegate (along with all other event binding methods) has been superseded by the on method, which would be used in the exact same manner:

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

Or `$('body').on('click','div.myDiv',function()...)` of course, only if using jQuery 1.7+ — Blazemonger, Jan 10 '12 at 16:07
`on` isn't necessary a delegate. you can still use it in the `bind` manner : `el.on(event,eventHandler)` — gion_13, Jan 10 '12 at 16:11

score 1 · Answer 3 · answered Jan 10 '12 at 16:24

While you should consider switching to .on() if you are using 1.7+, here is the answer to your delegate question:

jQuery live() essentially binds an event handler to the entire widow.document object, which interrogates every event (that matches your given event type) if the source matched your selector. If it did, it will then fire the handler. This allows you to handle events that come from dynamically added elements.

jQuery delegate() is similar to live() except that you are able to specify a selector for the container rather than just window.document. This means that you will be interrogating the source of a smaller number of events, hence better performance.

If you want to exactly replicate the behavior of live() by changing to delegate(),

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

Becomes:

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

It is important to notice that you're not gaining anything by keeping the $(document) in the delegate() call. You should change this selector to a more specific container to where your dynamic elements will be created.

jQuery: live() and delegate()

3 Answers3