绑定jQuery插件时使用委托目标

Question

我正在写一个jQuery插件。 当我为此插件设置init方法时，我想为上下文设置事件，但是不确定是为事件设置委托目标还是将事件直接绑定到上下文。

我想考虑委托的主要原因是将此插件与动态内容一起使用。 在某些情况下，可以使用ajax将调用插件的这些元素附加到页面上。 在这种情况下，有没有办法设置事件，这样我就不必在ajax调用后销毁并重新绑定事件？

目前，我正在执行以下操作：

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

我应该考虑做这样的事情：

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

或将委托作为选项存储在选项中的事件，如下所示：

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

我注意到，当使用委托格式时，事件绑定到上下文的选择器，而不是实际的上下文元素（即，如果它是一个锚点，它将绑定到页面上的所有锚点）。 有什么办法避免这种情况？

谢谢！

Answer 1

如果只需要绑定子元素，则可以使用以下方法：

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

“ .on”事件替换为“代理，绑定，活动等”。 现在，您只能将所有事件附加在一个地方。 这非常好，因为在此之前，您需要使用对ajax元素不起作用的“绑定”，因为您的“实时”限制是有限的。

在我的示例中，附件仅与“ #my_target”内部的“ .my_class_target”一起使用。 因此，如果将起始元素附加到主体上，例如：“ $（” body“）。on（” click“，” .my_class_target“，handle），以便所有” .my_class_target“都将附加。然后，秘密就在您的”选择器“中“。请记住，在加载页面时必须创建第一个选择器” $（＃my_target“）”，而另一个选择器可以由ajax加载或由dom创建。

让我们举个例子：

<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.

希望对您有所帮助。

字体：

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

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