单击选择器上的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>