特定元素中的OnClick元素

Question

我希望知道点击特定div中某个类的优雅解决方案

$( ".clickdiv" ).on( "click", function () { //do stuff }

这适用于任何clickdiv类。但是，我希望它仅在clickdiv与certain div

嵌套时才有效

<div class="certaindiv">
   ...bunch of divs
       <div class="clickdiv">
   ...bunch of close divs
<div>

Answer 1

将您的选择器更新为.certaindiv .clickdiv，它只会选择.clickdiv内的.certaindiv

$(".certaindiv .clickdiv").on("click", function() { 
  alert('clicked');
  //do stuff
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="certaindiv">
  ...bunch of divs
  <div class="clickdiv">
    shdhsghdh
  </div>
  ...bunch of close divs
</div>
<div class="clickdiv">
  shdhsghdh
</div>

Answer 2

如果元素在加载并且永不更改时位于页面上，则只需修改选择器：

$( ".certaindiv .clickdiv" ).on( "click", function () { /*do stuff*/ }

如果动态创建元素，则可以使用事件委派：

$( ".certaindiv" ).on( "click", ".clickdiv", function () { /*do stuff*/ }