javascript - 为什么这些按钮不删除包含它们的行？

Question

我试图对以下代码片段执行的操作应该是不言自明的

    <tbody id="slide-table-body">
    </tbody>                            
</table>
<button class="wp-core-ui button-primary" type="button" onclick="addAnotherSlide()">Add another carousel item</button>
<script type="text/javascript">
      var newRowHtml = '<tr><td>(assetprevurl)</td><td>(asseturl)</td><td><button type="button" class="wp-core-ui button-primary deleteSlideButton">Delete Slide</button></td></tr>';

      function addAnotherSlide() { jQuery('#slide-table-body').append(newRowHtml); }

      jQuery(function($){
           $('.deleteSlideButton').click(function() { $(this).closest('tr').remove();});
</script>  

我的问题是

$('.deleteSlideButton').click(function() { $(this).closest('tr').remove();} );

没有删除该行，我不明白为什么。

Answer 1

这是因为您在加载 DOM 后添加 html，请尝试使用 Jquery on :

$( ".deleteSlideButton" ).on( "click", function() {
      console.log($(this));
});