javascript - 单击图像时 jQuery 单击不触发 - 隐藏/显示表格行

Question

尝试完成一项相当简单的任务。单击图像，然后显示隐藏的表格行。这是jquery:

$(".trigger_44870").click(function() {
   alert('hi');
  $("#target_44870").show();
});

相关 HTML:

    <tr>
      <td colspan='13'><img src='https://feedback.primecaremedical.com:8887/purchasing/_assets/images/plus.png' width='1%' class='trigger_44870'></td>
    </tr>
    <tr style="display: none;" id='target_44870'>
      <td colspan=13>Supporting Data</td>
      <td colspan=13>Supporting Data</td>
    </tr>

每当我单击图像时，jquery 函数都不会触发任何内容。

有什么想法吗？

https://jsfiddle.net/o4aqbctn/4/

Answer 1

当调用 $(".trigger_44870").click(...) 时，class="trigger_44870"的图像元素尚未在 DOM 中，因此触发器失败。

将脚本代码移至页面底部( </body> 之前)或将其放置在 ondomready 类型事件内:

    $( document ).ready(function() {
      $(".trigger_44870").click( function(){
      alert('hi');
        $("#target_44870").show();
      } );
    });