ネストした表td要素のクリックイベント（最初の表がない場合）td

Question

ユーザーがimg要素をクリックすると、警告はtest-imageとtwo-side-textと表示されます。しかし、私の必要性はtest-imageとしか表示されません。どうやってやるの？

$("body").on('click', 'td', function(evt) { 
 
    alert($(this).attr('class')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="Two-side-text"> 
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td class="test-image"> 
 
       <img src="img-placeholder.png"> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td class="test-paragraph"> 
 
       <p> 
 
        test paragraph 
 
       </p> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

あなたは親td要素にDOMをバブルアップイベントを停止する必要があります。あなたがイベントにstopPropagation()を呼び出すことができることを行うには、次のように：

$(document).on('click', 'td', function(evt) { 
 
    evt.stopPropagation(); 
 
    alert($(this).attr('class')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="Two-side-text"> 
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td class="test-image"> 
 
       <img src="img-placeholder.png"> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td class="test-paragraph"> 
 
       <p> 
 
        test paragraph 
 
       </p> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody>