單擊選擇器上的jQuery附加到多個元素

Question

我通常會為加載了ajax的元素處理click事件，如下所示：

$(document).on("click", ".selector", function () { ...}

但是在我多次加載內容的特定情況下，$（document）不起作用，而是僅當我將其附加到父$('.selector-parent').on("click", ".selector", function () { ...}

根據情況，並非總是有一個父選擇器。 是否可以將其附加到文檔，如果選擇器存在，則使用它，例如：

$(document, '.selector-parent').on("click", ".selector", function () { ...}

我不想設置任何其他搜索父元素是否存在，而是像這樣使用它。

Answer 1

您可以簡單地執行以下操作：

$('.selector-parent').add(document).on("click", ".selector", function (e) {
    e.stopPropagation();
    console.log(e.delegateTarget);
});

這里有一些解釋。 您可以使用add方法選擇父元素（可能不存在）和document到一個集合中。 之后，您需要確保.selector-parent和document都未兩次處理事件，因此，無論元素先處理該事件如何，它都可以使用e.stopPropagation();阻止事件進一步冒泡e.stopPropagation(); 。

結果，如果沒有父.selector-parent作為單擊的.selector的祖先，則document將處理事件。 如果.selector-parent存在，它將完成工作，並且不會使用document 。

查看下面的演示，了解這兩種情況下的工作原理。

 $('.selector-parent').add(document).on("click", ".selector", function (e) { e.stopPropagation(); alert(e.delegateTarget.nodeName); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector-parent"> <div class="selector">Parent exists</div> </div> <div> <div class="selector">No parent exists</div> </div>