jQuery - 表单提交答案

【问题标题】：jQuery - Form submitjQuery - 表单提交
【发布时间】：2012-10-15 13:27:55
【问题描述】：

我有一个打算使用 jQuery 提交的表单。以下代码第一次可以正常工作。

如果返回的数据等于“更新”，我会在 #cart-content 元素中重新创建表单。换句话说：如果我提交表单并且它更新了我的购物车，我的网站上有一个新表单（具有相同的类、相同的输入等）。

如果我再次点击提交，它不会触发我的 jQuery 代码。我猜是因为它是一个新表单，在页面加载时不存在，所以 jQuery 没有绑定到它的事件，并且在我提交表单时它不会被触发。

我需要进行哪些更改才能使其正常工作？提前致谢！

$("form.update-cart").on("submit", function(event){
        $.post(link + "create_order/update_cart",  $(this).serialize(),  
        function(data){  
            if(data == 'updated')
            {
                var csrf_cookie = $.cookie('csrf_cookie_name');
                $("#cart-content").load(link + "create_order/display_cart", {"csrf_test_name": csrf_cookie});
            }
            else if(data == 'nothing-to-update')
            {
                return false;
            }
            else
            {  
                alert("Couldnt update cart!");  
            }  
        });  
        return false; 
});

【问题讨论】：

向我们展示您的 html，您要替换整个表单吗？为什么不使用.on 为注入的新表单绑定另一个事件处理程序？

标签： jquery

【解决方案1】：

回复您和 Catalin Ene，jQuery's "live" function is being deprecated from jQuery。

如果您使用的是 jQuery 1.7.x 或更高版本，则应使用“on”函数：

$("form.update-cart").on("submit", function(event) {

如果您的 jQuery 的 版本低于 1.7，您可以使用“delegate”：

$("form.update-cart").delegate("submit", "#submit_btn", function(event) {

还有一个建议：最好使用服务器端脚本的 XML 或 JSON 输出。

【讨论】：

【解决方案2】：

试试看：

$("form.update-cart").live("submit", function(event){

【讨论】：

【解决方案3】：

我已经想通了，但我会尽快接受答案。谢谢！

$(document).on("submit", "form.update-cart", function(event) {
        $.post(link + "create_order/update_cart",  $(this).serialize(),  
        function(data){  
            if(data == 'updated')
            {
                var csrf_cookie = $.cookie('csrf_cookie_name');
                $("#cart-content").load(link + "create_order/display_cart", {"csrf_test_name": csrf_cookie});
            }
            else if(data == 'nothing-to-update')
            {
                return false;
            }
            else
            {  
                alert("Konnte Warenkorb nicht aktualisieren!");  
            }  
        });  
        return false; 
});

【讨论】：