Question

我使用jQuery向我的＆＃34; .item-table＆＃34;添加追加内容在HTML中。

添加代码后，html使用所有正确的css样式完美呈现内容。问题是我在.js中编写的代码无效。

所以现在有两个按钮：1）HTML启动按钮，2）通过jQuery添加

.click适用于案例1）但不适用于2）

您需要重新应用js文件吗？还是有其他东西可以解决这个问题？

与＆＃34; .item-delete-button＆＃34;

相关联的点击事件

$('.item-delete-button').click(function(){console.log("test")};

添加到html的代码

$('.item-table').append(
  '<div class="item-table-row col-xs-12">'+
    '<div class="item-delete col-xs-2">'+
      '<button type="button" class="item-delete-button btn btn-warning col-xs-6">Delete</button>'+
    '</div>'+
  '</div>'
);

在启动时的HTML中

<div class="row item-table">
  <div class="item-table-row col-xs-12">
    <div class="item-delete col-xs-2">
      <button type="button" class="item-delete-button btn btn-warning col-xs-6">Delete</button>
    </div>
  </div>
</div>

Answer 1

您需要为动态html使用事件委托，将事件绑定到DOM ready上存在的父元素（使用.on）：

$('.item-table').on("click", ".item-delete-button", function(){ 
    console.log("test")
});

事件没有接受jQuery生成的HTML

1 个答案: