Using a delegate target when binding for a jQuery plugin

Question

I am writing a jQuery plugin. When I am setting up the init method for this plugin, I want to set up events for the context, but am uncertain whether I should set a delegate target for the event or bind the event directly to the context.

My main reason for wanting to consider a delegate is the use of this plugin with dynamic content. In certain cases, these elements that the plugin is called on may be appended to the page using ajax. In this case, is there a way to set the events up so that I don't have to destroy and re-bind the events after ajax calls?

At the moment, I am doing something like this:

$(this).on('click', initEditor);

Should I consider doing something like this:

$('body').on('click', this, initEditor);

or event storing the delegate as an option in the options, like this:

$(options.delegate).on('click', this, initEditor);

I've noticed that, when using the delegate format, the event is bound to the context's selector, not the actual contextual element (ie if this is an anchor, it will bind to all anchors on the page). Any way to avoid that?

Thanks!

Answer 1

If you need to bind only on children elements you will use this:

$("#my_target").on("click", ".my_class_target", handler);

The ".on" event replaces "delegate, bind, live, etc". Now you can attach all events in only one place. This is very nice, because before that you need to use "bind" that didnt work with ajax elements, for that you have the "live" wich is limited.

In my example the attach you work only with ".my_class_target" that is inside the "#my_target". So if attach the start element on body like: "$("body").on("click", ".my_class_target", handle) so all ".my_class_target" will be attached. Then, the secret is in your "selector". Have in mind that the first selector "$(#my_target")" have to be created when the page is loaded and the other selector can be loaded by ajax or created by dom.

Lets take a example:

<div id="my_div">
    <ul class="ul-1">
        <li class="li-1-1"></li>
        <li class="li-1-2"></li>
        <li class="li-1-3"></li>
        <li class="li-1-4">
            <ul class="ul-2">
                <li class="li-2-1"></li>
            </ul>
        </li>
    </ul>
</div>

js:

my_function = function(){};
$("body").on("click", "li", my_function); //handle all li
$("body").on("click", "ul.ul-1 > li", my_function); //attach only in li-1-X 

// if ul-1 is generate with ajax:
$("#my_div").on("click", "li", my_function); // will work with all li
$("ul.ul-1").on("click", "li", my_function); // wont work because the first selector "ul.ul-1" was not generated when the attach was called.

I hope this help.

fonts:

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

http://api.jquery.com/category/selectors/