Question

我确信对此有一个简单的解释，但我在搜索答案时找不到合适的词语。

当用户填写表单.InvoiceForm时，它通过Ajax提交。提交后，删除.InvoiceForm类并添加.UpdateInvoice。当用户提交.UpdateInvoice表单时，它会解释他们即将进行更改，并且他们必须单击以说“是，我希望此更新”。

问题在于，除非我刷新页面以便使用.UpdateInvoice表单加载表单，否则我不会得到确认，这意味着它仍然以.InvoiceForm形式提交。我能做些什么来解决这个问题吗？

编辑以显示代码：

如果没有记录则运行的代码

$('.InvoiceForm').submit(function(e) {

        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            cache: false,
            dataType: 'json',
            context: this,
            data: $(this).serialize(),
            beforeSend: function() { 
                $(".validation-errors").hide().empty(); 
            },
            success: function(data) {
                $(this).removeClass('InvoiceForm');
                $(this).addClass('UpdateInvoice');
                $(this).find('.btn').val('Update');
                $(this).find('.id').val(data.invoice_id);
                $(this).find('.btn').removeClass('btn-default');
                $(this).find('.btn').addClass('btn-danger');
                $(this).find('.AddRow').removeClass('hide');
                $(this).find('.invoiceDetails').html(data.returnedData);
                $(this).parent().next().find('.grade').focus();

            }
        });
        return false;
};

正在更新记录时运行的代码

$('.UpdateInvoice').submit(function(){

        var r = confirm("Are you sure you want to make this update?");
        if (r == true) {
            $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            cache: false,
            dataType: 'json',
            context: this,
            data: $(this).serialize(),
            beforeSend: function() { 
                $(".validation-errors").hide().empty(); 
            },
            success: function(data) {

                alert('This row has been updated');
                $(this).find('.total').html(data);   
            }
        });
        } else {

        }
       return false;
   });

除非我刷新页面，否则.UpdateInvoice的函数不会运行。

感谢您的帮助。

Answer 1

在“.UpdateInvoce”创建之前绑定一个click事件，因此它不起作用。我认为您需要使用.live（）才能使其正常工作。请参阅此处的文档：jQuery's live()

HTML：

<button id="click_me" class="new">Click Me</button>
<div class="result" />

脚本：

$(function () {
    $('.new').click(function (e) {
        $('.result').text("Im new !");
        $(this).removeClass("new");
        $(this).addClass("update");

        // Bind UpdateInvoice's click event on the fly
        $('.update').live(bindUpdate());
    });

    function bindUpdate() {
        $('.update').click(function (e) {
            $('.result').text("Update me !");
        });
    }
});

jsfiddle's demo

在动态更改类时表单提交错误的函数

1 个答案: