javascript - 删除由 AJAX 添加的 HTML

Question

我有一个建立订单的页面。该页面完全使用 ajax 来查找产品并将它们添加到页面中。

现在，如果您添加一个项目并需要删除它，我正在构建功能来做到这一点：

$('.orderRemove').click(function() {
    var removeID = $(this).attr("id");
    $("#item-" + removeID).remove();
    calculateTotal();
});

但是由于 .orderRemove 是由 AJAX 添加的，所以它不起作用。

我如何才能使这个确切的调用工作，删除由 ajax 添加的完整块。

谢谢

Answer 1

原因是动态添加到 DOM 的 HTML 不会将自身附加到事件处理程序，因此要么在 ajax 成功回调中重新附加事件处理程序，要么尝试.delegate使用 jQuery 版本低于1.7或.on使用 jQuery 版本 1.7 或更高

$(document).delegate('.orderRemove','click',function() {
    var removeID = $(this).attr("id");
    $("#item-" + removeID).remove();
    calculateTotal();
});

.on 示例

$(document).on('click','.orderRemove',function() {
   var removeID = $(this).attr("id");
   $("#item-" + removeID).remove();
  calculateTotal();
});

Answer 2

你必须on像这样使用

$(document).on('click','.orderRemove',function() {
   var removeID = $(this).attr("id");
   $("#item-" + removeID).remove();
  calculateTotal();
});