jquery - 如何在不重写以前的 html 的情况下在 jQuery 表单插件中附加 html

Question

嗨，我正在使用此代码表单 Jquery Form 插件

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#htmlExampleTarget', 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $('#htmlExampleTarget').fadeIn('slow'); 
        } 
    }); 
});

这是页面的链接http://jquery.malsup.com/form/#html 此代码用新代码覆盖以前的代码，但我需要的只是将新代码附加到以前的 html 中。我尝试过简单的 jquery .append()，但这也覆盖了代码。

Answer 1

您可以获得响应并将其附加到您自己而不是使用目标，

$(document).ready(function() {    

    // bind form using ajaxForm 
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function(response) { 
            $('#htmlExampleTarget').append(response);
            $('#htmlExampleTarget').fadeIn('slow'); 
        } 
    }); 
});

在此处查看成功回调

Answer 2

您可以将原始html内容保存到dom数据存储中。
见：http ://api.jquery.com/data

$(document).ready(function() { 
    // Saves the previous content of #htmlExampleTarget
    var _htmlTarget = $('#htmlExampleTarget');
    _htmlTarget.data('prevHtml', _htmlTarget.html());

    // bind form using ajaxForm 
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#htmlExampleTarget', 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() {
            // prepends the original html content
            var _prevHtml = _htmlTarget.data('prevHtml');
            _htmlTarget.prepend(_prevHtml).fadeIn('slow'); 
        } 
    }); 
});