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

Using a delegate target when binding for a jQuery plugin

本文关键字：目标 绑定 jQuery 插件      更新时间：2023-09-26

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

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

此刻，我正在做这样的事情:

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

我应该考虑这样做吗?

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

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

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

我注意到，当使用委托格式时，事件被绑定到上下文的选择器，而不是实际的上下文元素(即，如果this是一个锚，它将绑定到页面上的所有锚)。有什么办法可以避免吗?

谢谢!

如果你只需要绑定子元素，你可以使用:

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

"。On"event"取代了"delegate, bind, live等"。现在，您可以只在一个地方附加所有事件。这是非常好的，因为在此之前，您需要使用"bind"，不能与ajax元素一起工作，因为您有"live"，这是有限的。

在我的例子中，您只使用"。My_class_target"，它位于"#my_target"的内部。因此，如果将开始元素附加在body上，如:"$("body")。("点击"、"。My_class_target "， handle) so all "。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/

相关文章：