Need help understanding jquery delegate() function

Question

I'm having a hard time understanding the syntax of the .delegate function of jquery. Let's say I have the following:

$(".some_element_class").delegate("a", "click", function(){

    alert($(this).html());

});

I know that the a element is the element to which the click event is applied. I know that once we click on that a element, the event click will be triggered and the callback function will be called. But what is the purpose of what comes before the .delegate? In this case, what is the purpose of .some_element_class? How do I read the above including the .some_element_class? Also, in the example above, what does $(this) represent? Does it represent the a element or does it represent .some_element_class?

Please somebody, shed some light on this.

Thank you

uday · Answer 1 · 2012-02-25T14:03:29.080

it means delegate() is invoked on the .some_event_class. and the a is selector string, click is event type string & function() is eventhandler function. delegate() method is used to handle the "live event" and for static events bind() is used. I hope this helps. feel free to ask if you have any doubts

Differences between bind() & delegate()

//Static event handlers for static links
$("a").bind("",linkHandler);

//Live event handlers for dynamic parts of the document
$(".dynamic").delegate("a", "mouseover", linkHandler);

Summary: they are just methods that bind event handlers to specific document elements.

score 1 · Answer 2 · answered Feb 25 '12 at 13:55

This reduces event binding.

This basically sets an event on a tags ONLY within the elements with class .some_element_class without actually binding an event to a tags directly.

http://api.jquery.com/delegate/

http://api.jquery.com/on/

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

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

$(".some_element_class").on("a", "click", function(){

    alert($(this).html());

});

score 1 · Answer 3 · 2012-02-25T14:03:23.190

"...what is the purpose of what comes before the .delegate?"

A delegate is bound to .some_element_class element.
That delegate is triggered for every click that takes place inside .some_element_class
That delegate tests what was clicked, so your handler function will only run if...
- the actual element clicked matches the "a" selector, or
- any ancestor of the actual element clicked that is a descendant of .some_element_class matches the "a" selector.

<div class="some_element_class">  <!-- delegate handler is here -->

    <div>won't trigger your handler</div>
    <a>will trigger your handler</a>
    <a><span>will trigger</span> your handler</a>

</div>

So you can see that only one handler is bound to the container. It analyzes all clicks inside the container, and if the element clicked (or one of its nested ancestors) matches the selector argument, your function will run.

Because there's just one enclosing handler, it will work for future elements added to the container...

<div class="some_element_class">  <!-- delegate handler is here -->

    <div>won't trigger your handler</div>
    <a>will trigger your handler</a>
    <a><span>will trigger</span> your handler</a>

      <!-- this element newly added... -->
    <a><span>...will also trigger</span> your handler</a>

</div>

"Also, in the example above, what does $(this) represent?"

this will represent the element that matched the "a" selector.

score 0 · Answer 4 · answered Feb 25 '12 at 13:57

The a is actually just a filtering selector, what will happen is that a normal click event is bound to .some_element_class, and anytime the event fires, the event target is traversed up to .some_element_class to see if there is an element that matches the filtering selector (tagname a). If it does, your callback is fired with this set to the first element that matched a selector in the bubbling path.

You can do something similar with bind:

$(".some_element_class").bind("click", function (e) {
    var matches = $(e.target).closest("a", this);
    if (matches.length) {
        yourcallback.call(matches[0], e);
    }
});

Need help understanding jquery delegate() function

4 Answers4