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>