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>