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元素一起工作的“bind”，因为你有“活”，这是有限的。

在我的示例中，您只使用“#my_target”中的“.my_class_target”进行附加。因此，如果在主体上附加start元素，例如：“$（”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.

我希望这有帮助。

fonts：

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

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

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

1 个答案: