jquery - ajax 调用后丢失表单模型绑定

Question

我$('#form').serialize() = ""在我的 ajax 调用之后得到：

$('#continueBtn').bind('click', function () {
    var url = $('#form').attr('action') + setFlowEvent('continue');
    $.ajax({
        type : "POST",
        url : url,
        cache:false,
        data: $('#form').serialize(),
        dataType: "html",
        success : function(response) {
            var newContent = $($.parseHTML(response)).find("#ajax-content");
            $('#ajax-content').html(newContent);
            bindAjaxSubmit();
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error!");
        }
    });
});

我有下一个jsp代码：

<div id="ajax-content">  
    <form:form id="form" modelAttribute="model" action="${actionURL}" method="post">
        <input id="field1" type="text" value="1" name="field1"></input>
        <input id="field2" type="text" value="2" name="field2"></input>
        <button id="continueBtn">continue</button>  
    </form:form> 
</div>

Answer 1

好的，你会想要玩这个 - 但我认为正在发生的事情是你将响应 #ajax-content 嵌套在现有的 #ajax-content 中。

所以这里有一个建议...

<div id="target-area">
  <div id="ajax-content">
     ...
  </div>
</div>

然后为您的 ajax 尝试执行以下操作：

$(function() {
    $("#target-area").on("click", "#continueButton", function() {
        $.ajax({
                type : "POST",
                url : url,
                cache:false,
                data: $('#form').serialize(),
                dataType: "html",
                success : function(response) {
                    var newContent = $($.parseHTML(response)).find("#ajax-content");
                    $('#target-area').html(newContent);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("error!");
                }
            });
    });
});

通过执行上述操作，您将自动捕获按钮事件，前提是 ajax 响应提供相同或相似的正文内容。