Question

当涉及到使用AJAX动态引入的元素的子元素时，我遇到了jQuery的问题。

所以我有以下声明：

$('.Select-menu-outer').children().click(function() {
  console.log("tiggered");
});

然而，由于某些原因这不起作用，当我点击.Select-menu-outer元素的子元素时没有任何反应。

如果我使用以下声明：

$(document).on("click", '.Select-menu-outer', function() {
  console.log("tiggered");
});

但它会触发我想触发该元素的子元素。知道我怎么能用.on？

做到这一点

由于

Answer 1

立即子选择器>等同于.children()方法。您需要修改选择器以定位直接子元素：

$(document).on("click", '.Select-menu-outer > *', function() {
  console.log("tiggered");
});

Answer 2

如果是动态内容，您必须执行以下操作：

//This if you want a specific element within the parents' children
$(document).on('click', '.Select-menu-outer > .Select-menu-inner', function() {
  console.log('A .Select-menu-inner element was clicked');
});

//This if you want all the parents' children
$(document).on('click', '.Select-menu-outer > *', function() {
  console.log('A child element was clicked');
});

请参阅此代码段以了解指定内部类的好处

＆＃13;

$(document).on('click', '.select-menu-outer > .select-menu-item', function () {
  console.log('clicked %s', $(this).data('title'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="select-menu-outer">
  <li class="select-menu-item" data-title="first">
    First Item
  </li>
  <li class="select-menu-item" data-title="second">
    Second Item
  </li>
  <li class="select-menu-item" data-title="third">
    Third Item
  </li>
  <li class="select-menu-item-no-click">
    Can't Touch This
  </li>
</ul>

＆＃13;

Answer 3

来自JQuery on方法文档（http://api.jquery.com/on/）：

.on( events [, selector ] [, data ], handler )

  大多数浏览器事件从文档中最深的，最里面的元素（事件目标）起泡或传播，它们一直发生到正文和文档元素。

如果省略selector或为null，则事件处理程序称为直接或直接绑定。每次在所选元素上发生事件时都会调用该处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的气泡。

当提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

来自Jquery click方法（http://api.jquery.com/click/）：

此方法是.on（“click”，handler）
的快捷方式

因此，阅读这些摘录，我们可以得出结论，当您通过click方法将处理程序附加到.Select-menu-outer =＆gt;的子项时当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于后代。
因此，如果.Select-menu-outer的孩子没有后代，那么就不会有事件处理。

点击儿童动态内容

3 个答案: