動態創建的表單，使用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()
});