Am I understanding the jQuery delegate function correctly?

Question

I know that a div will appear at some point in my page's future DOM, and I know the id of it (it's generated by SharePoint javascript) - is it possible for me to use jQuery delegate to attach an event handler to this div prior to it existing in the DOM?

Also, how does this compare to .live() for this particular scenario?

which version of JQuery are you using? from that link you posted, `'As of jQuery 1.7, .delegate() has been superseded by the .on() method.'` I'd recommend you look at `.on()` — robasta, Aug 22 '12 at 09:15

score 3 · Accepted Answer · answered Aug 22 '12 at 09:17

3

Short answer: Yes

Long answer: As of jQuery 1.7+ .on() is prefered before the two you have mentioned, they are deprecated. This is an example on .on():

    $('#parent').on("click", "span.children", function() {
        if ( confirm("Are you sure?") ) {
            console.log(this);
        }
    });

answered Aug 22 '12 at 09:17

sQVe

1,977
12
16

So, with the code you've provided - I'm assuming I can swap span.children for another jQuery selector? (i.e. explicitly naming the id of the div that may appear at some point in the future)? – Aug 22 '12 at 09:20
1

@DeeMac Oh-so-correct! You need to change the parent selector also though. – sQVe Aug 22 '12 at 09:22
1

@DeeMac Also, if your going to add more children than one: Use a class instead of an id. For instance in this example, all spans with the class .children will be binded to this click event. – sQVe Aug 22 '12 at 09:26
$(document).on("click", "#ms-cui-menu.children", function() { alert('test'); }) - does this look right @sQVe? i.e - when any children of the li ms-cui-menu are clicked, the alert will be shown? It doesn't appear to be working, can't work out why. – Aug 22 '12 at 09:56
1

@DeeMac `$("#ms-cui-menu").on("click", ".children", function() { alert('test'); })` is probably correct, try it. – sQVe Aug 22 '12 at 09:58
#ms-cui-menu isn't always there from the start either though, put I don't think attaching a click event handler to the list will cut it because it's its child elements that will be clicked. – Aug 22 '12 at 09:59
@DeeMac Well, preferably you want a #parent closer to the child elements than document is, otherwise you loose preformance. – sQVe Aug 22 '12 at 10:01

score 1 · Answer 2 · answered Aug 22 '12 at 09:15

1

Yes, you could do this, but you could use .on method instead, and don't use .live, it is deprecated.

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+

answered Aug 22 '12 at 09:15

xdazz

158,678
38
247
274

This wouldn't work if `elements` doesn't exist, would it? Correct me if I'm wrong please – davids Aug 22 '12 at 09:18
@davids Yes, so the events should be delegated at the parents element which exist. The future elements should be the `selector`. – xdazz Aug 22 '12 at 09:20

PeeHaa · Answer 3 · 2012-08-22T09:22:41.700

You should use .on(). And you should never use .live().

For a performance test between the three see: http://jsperf.com/jquery-live-vs-delegate-vs-on

Besides the fact that .live() is deprecated it is also very slow compared to the other two.

Basically what you are doing with .on() or .delegate() is add eventhandlers to elements within a container whether the elements already exist or if it is added to the DOM dynamically.

score 1 · Answer 4 · answered Aug 22 '12 at 09:17

Yes, you can, but both methods have been superseded in favour of on() on recent versions of jQuery.

Also, live() always attaches the event handler to the (top of the) document, whilst delegate() allows you to choose where to attach the events, thus it can be more efficient if you know before hand where the element is going to be.

Am I understanding the jQuery delegate function correctly?

4 Answers4