動態創建表單提交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

的問題是，你class="removeitem"元素添加後動態DOM就緒，因此新的元素並不必然$('.removeitem').click()。嘗試通過委託給代結合它 -

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

Answer 2

只要改變：

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

到：

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