Javascript 事件未在jQuery生成的HTML上拾取

我使用jQuery在HTML中将追加内容添加到我的.item表中

添加代码后，html以所有正确的css样式完美地呈现了内容。问题是我在.js中编写的代码不起作用

现在有两个按钮：1 HTML启动时的按钮，2通过jQuery添加

.click在案例1中有效，但在案例2中无效

是否需要重新应用js文件？还是有其他办法可以解决这个问题

与.item delete按钮关联的单击事件

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

---

您需要对动态html使用事件委派，使用将事件绑定到父元素。在DOM ready上存在的上：

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