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

在Ajax响应中加载HTML

1 个答案: