在Ajax响应中加载HTML

Question

因此，当返回一个HTML页面作为具有表单的ajax响应，并且表单由页面中的某些脚本自动触发时，我正在处理这种奇怪的服务（因此，在呈现页面时，将向您发送发布请求）。 我想做的是加载我从响应中得到的页面。

说这是我的Ajax电话：

var ajax_call_test = function() {
    var formData = new FormData($('#documentForm')[0]);
    console.log("doc form: " + formData);

    $.ajaxSetup({
        xhrFields: {
            withCredentials: true
        }
    });

    $.ajax("/documents/upload/", {
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            // ?
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("failed: " + errorThrown);
        }
    });
}

因此，我尝试使用.html将响应设置为隐藏的<div> 。 它设置html，但从不触发表单。 我猜测当我使用.html时，该页面中的javascript无法加载。

我也不能使用jQuery.parseHTML()因为我使用的库版本不支持该功能。 知道我该如何应对吗？

Answer 1

每当您将新的html加载到DOM中时。 javascript对此一无所知。

我必须重新调用我的JavaScript才能使用新的DOM。

可以说我有一些点击事件

$(function(){invokeClicks()}) // onload call

function invokeSomeAction(){
    $("selector").off(); // disable previous events from old html
    $("selector").on("event", function(){
        // handle event
    })
}

function invokeClicks(){
    invokeSomeAction();
    // ... etc
}

因此，在加载此JS时，将invokeClicks()方法。

现在，如果我通过$.ajax()调用替换了HTML，那么我要做的就是再次调用invokeClicks()清除旧事件，现在新的HTML将可以与javascript一起使用

$.ajax({
    url: "somepath",
    data: {id: 1},
    method: "GET", 
    success: function(html){
         $("container_selector").html(html);
         invokeClicks(); // reinit
    },
})