动态创建表单提交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>