动态创建的表单，使用preventDefault提交

Question

我有一个页面，其中列出了一堆带有“添加到购物车”按钮的项目，用户单击该按钮会触发AJAX，这会将该项目添加到php购物车，并将该项目添加到侧边栏以直观地显示购物车中的内容，删除按钮。 问题是，当我单击删除按钮时，即使我已阻止默认附加到该功能，它也会刷新页面

这有效

$(document).ready(function(e) {
$('.additem').click(function(e) {
    e.preventDefault();
    $(this).html('Added').attr('disabled' , true);
    $(this).closest('form.form_add').submit()

});

$('form.form_add').submit(function(e) {
e.preventDefault();
$.ajax({
  type: "POST",
  url: "buy-page-handler.php",
  data: $(this).serialize(),
  dataType: "json",    
  success: function(result) {
    var id = result.id;
    var name = result.name;
    var qty = result.qty;
    var price = result.price;
    $('#sidebar').append('<div class="cart_cont">'
                            +'<div class="desc">'+name+' '+price+'</div>'
                            +'<div class="remove">'
                                +'<form method="post" class="form_delete">'
                                    +'<button type="submit" class="removeitem">Remove</button>'
                                    +'<input type="hidden" name="id" value="'+id+'">'
                                    +'<input type="hidden" name="item-remove" value="true">'
                                +'</form>'
                            +'</div>'
                        +'</div>');
      }
 });
});

这不行

$('.removeitem').click(function(e) {
    e.preventDefault();
    $(this).closest('.form_delete').submit()

});

$('.form_delete').submit(function(e) {
e.preventDefault();
$.ajax({
  type: "POST",
  url: "buy-page-handler.php",
  data: $(this).serialize(),
  success: function() {
      alert("success")
      }
 });
});

这是我第一次尝试使用jquery / ajax / php组合，因此我确定它有点粗糙。 任何帮助将不胜感激。

Answer 1

只是改变：

<button type="submit" class="removeitem">Remove</button>

至：

<button type="button" class="removeitem">Remove</button>

Answer 2

问题是在DOM准备就绪后会动态添加您的class="removeitem"元素，因此您的新元素不会绑定到$('.removeitem').click() 。 尝试通过委派给父级将其绑定-

$('#sidebar').on('click', '.removeitem', function(e) {
    e.preventDefault();
    $(this).closest('.form_delete').submit()
});