1

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

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

目前，我正在做这样的事情：

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

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

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

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

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

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

谢谢！

4

1 回答 1

1

如果您只需要绑定子元素，您将使用：

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

".on" 事件替换了 "delegate, bind, live, etc"。现在，您可以将所有事件仅附加到一个位置。这非常好，因为在此之前您需要使用不适用于 ajax 元素的“绑定”，因为您的“实时”是有限的。

在我的示例中，您只能使用“#my_target”内的“.my_class_target”进行附加。因此，如果在 body 上附加起始元素，例如： "$("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/

于 2013-05-03T17:54:17.693 回答