click -Ereignis für geschachtelte Tabelle td-Element ohne erste Tabelle td

Question

Wenn ein Benutzer auf das Element img klickt, zeigt die Warnung test-image und die two-side-text an. Jedoch muss ich nur test-image zeigen. Wie kann ich das machen?

$("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

Sie müssen das Ereignis stoppen das DOM an die Mutter td Elemente sprudeln. Dazu müssen Sie stopPropagation() auf das Ereignis aufrufen können, wie folgt aus:

$(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>