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>