jquery，在父母点击检查子女

Question

我怎样才能做的动作后点击“child_good”，而不是点击“child_wrong”。但onClick事件必须位于“父级”上。

<div class="parent"> 
    <div class="child_wrong"></div> 
    <div class="child_good"></div> 
</div> 

<script> 
    $('.parent').on('click', function(){ 

     if($(this).hasClass('child_good')) { 
      alert(1); 
     } 
     return false; 
    }); 
</script> 

Answer 1

使用$(event.target)检查点击元素的类。

$('.parent').on('click', function(event){ 
 
    if($(event.target).hasClass('child_good')) { 
 
     alert(1); 
 
    } 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child_wrong">aaa</div> 
 
    <div class="child_good">bbb</div> 
 
</div>

Answer 2

可以使用Event Delegation事件委托给父母。

$('.parent').on('click', '.child_good', function(event){ 
 
    alert(1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child_wrong">aaa</div> 
 
    <div class="child_good">bbb</div> 
 
</div>