Question

我通常会处理使用ajax加载的元素的click事件：

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

但是在我多次加载内容的特定情况下，某种方式$（文档）不起作用，而只有在我将其附加到父$('.selector-parent').on("click", ".selector", function () { ...}时才有效

根据具体情况，并不总是父选择器。是否可以将其附加到文档，如果存在选择器，则使用它，如：

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

我不想设置if else来搜索父元素是否存在，而是像这样使用它。

Answer 1

您可以简单地执行以下操作：

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

这是一个小解释。您可以使用document方法将父元素（可能不存在）和add都选择到一个集合中。之后，您需要确保.selector-parent和document都不会处理事件两次，因此无论哪个元素首先处理它，它都会阻止事件进一步冒泡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>

单击选择器上的jquery附加多个元素

1 个答案: