javascript - 使用jQuery绑定(bind)动态元素时，请使用CSS选择器引用self。

此代码用于使用jQuery将事件绑定到动态元素。
#selfID元素的父元素为body。
然而，body除了#selfID之外还有多个孩子。
目标是缩小绑定范围，并且只绑定到mousedown的#selfID事件及其任何以childClass1和childClass2为类的子级。（#selfID的兄弟姐妹也可能有childClass1和childClass2子女。）
#selfID是静态的，不是动态创建的。
因此，代码适用于动态创建的childClass1和childClass2元素，但它不适用于mousedown本身上的#selfID事件。
是否可以在selector语句中引用自身？否则，似乎唯一的另一个选择就是为#selfID创建一个单独的绑定语句？

  $("#selfID").on("mousedown", ".childClass1, .childClass2, #selfID", function(event) {
        // Do stuff
   });

最佳答案

如the documentation所述：
一个选择器字符串，用于筛选触发事件的选定元素的后代。如果选择器为空或省略，则当事件到达所选元素时总是触发该事件。
由于#selfID是静态的，您可以尝试使用如下父元素：

$("#selfID").parent().on("mousedown", "#selfID .childClass1,#selfID .childClass2, #selfID", function(event) {
    // Do stuff
});

所以你在一个上面的元素上做逻辑，在那里你可以添加所需的元素。

$("#selfID").parent().on("mousedown", "#selfID .someclass, #selfID", function(event) {
  $(this).toggleClass('target');
  event.stopPropagation()
});

#selfID {
  background:red;
  width:100px;
  height:100px;
}
.someclass {
  width:50px;
  height:50px;
  background:blue;
}
.target {
  border:5px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selfID">
  <div class="someclass"></div>
</div>

<div class="someclass"></div>

我们可以通过在函数中添加一个条件来优化它，以减少选择器：

$("#selfID").parent().on("mousedown", ".someclass1,.someclass2, #selfID", function(event) {
  if($(this).closest('#selfID').length) {
    $(this).toggleClass('target');
    event.stopPropagation()
  }
});

#selfID {
  background:red;
  width:120px;
  height:120px;
}
.someclass1 {
  width:50px;
  height:50px;
  background:blue;
}
.someclass2 {
  width:50px;
  height:50px;
  background:green;
}
.target {
  border:5px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selfID">
  <div class="someclass1"></div>
  <div class="someclass2"></div>
</div>

<div class="someclass1"></div>

<div class="someclass2"></div>