javascript - 在 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
    },
})