綁定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); 

的「對」事件將取代‘委託，綁定，住等’。現在，您只能在一個地方附加所有活動。這是非常好的，因爲在此之前，你需要使用「綁定」，沒有與ajax元素一起工作，因爲你有「活」，這是有限的。

在我的示例中，僅使用「#my_target」中的「.my_class_target」工作。因此，如果將起始元素附加在身體上，如「$（」body「）。on（」click「，」.my_class_target「，句柄），所有」.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/