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));
});

Answer 2

这是因为您已将事件处理程序附加到新创建的DOM元素。将其更改为：

$('.deleteSlideButton').on("click", function() {
  // do something
});

这也可能有所帮助：Difference between .on('click') vs .click()

为什么这些按钮没有删除包含它们的行？

2 个答案: