綁定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/