Загрузка HTML в ответе Ajax

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, но никогда не запускает форму. Я предполагаю, что JavaScript на этой странице не загружается, когда я использую .html.

Я также не могу использовать 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().

Теперь, если я заменю HTML через вызов $.ajax(), все, что мне нужно сделать, это снова вызвать invokeClicks(), чтобы очистить старые события, и теперь новый HTML будет работать с javascript

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