Jquery .load () не загружает JavaScript в загруженном контенте

Question

Я знаю, что об этом спрашивали много раз, но я все еще не нашел ясного и полезного ответа, поэтому я подумал, что напишу вопрос снова в более ясном формате?

Проблема в том, что когда вы используете функцию .load (), и у вас есть javascript, который должен работать в загруженном файле, он не работает, так как я предполагаю, что DOM уже загружен.

Самый простой способ - просто снова загрузить javascript внутри загруженного файла, но если у вас загружено много файлов с javascript повсюду, это не очень хорошая практика.

Кто-нибудь знает хороший способ сделать это?

Это настолько близко, насколько я могу сказать, чтобы быть достаточно аккуратным ??

<a data-toggle="modal" data-target="#DIV" href="./ajax/file.php?id='.$row['id'].'"></a>


$("a[data-toggle='modal']").on('click', function() {
    var target, url;
    target = $(this).attr('data-target');
    url = $(this).attr('href');
    return $(target).load(url, function(responseText, statusText, xhr){
       if(statusText == "success"){
       // Re-initiate all required javascript if the load was successful.
           $(".datepicker").datepicker({
               changeMonth: true,
           changeYear: true,
           showOn: "both",
           buttonImage: "./assets/img/calendar.gif",
           buttonImageOnly: true,
           dateFormat: 'dd-mm-yy' 
        });
        }
        if(statusText == "error"){
            alert("There was a problem trying to load the page.");
        }
    });
});

Внутри файла file.php есть просто форма, в которой есть поля, требующие таких вещей, как указатель даты и т. Д. Нагрузка работает нормально.

Answer 1

Если я понял ваш вопрос, то я думаю, что вы должны обернуть все свои функции javascript (которые должны выполняться после каждого успешного вызова ajax) в одну функцию, такую ​​как

function initReady(){
    $(".datepicker").datepicker({...});
    // Other codes
}

и ваш document.readyСобытие должно быть следующим за

$(document).ready(function(){
    initReady();
});

, и всякий раз, когда вам нужно инициализировать динамический контент после успешного вызова ajax, просто вызовите функцию initReady () следующим образом

initReady();

В вашем случаевы можете просто сделать это внутри вашего успешного обратного вызова, как показано в приведенном ниже коде

if(statusText == "success"){
   // Re-initiate all required javascript if the load was successful.
   initReady();    
}

Так что каждый раз, когда вам не нужно писать весь код javascript внутри каждой функции обратного вызова ajax success, а также это сохранит вашвремя и держите ваш код в чистоте.

Примечание: Однажды я столкнулся с проблемой при использовании этого подхода только с datePicker , и это было так на динамически загружаемой страницебыл вход datePicker, и он не инициализировался даже после того, как была вызвана моя функция initReady () и чем я использовал setTimeoФункция ut для вызова моей функции initReady ()

setTimeout(function(){ initReady() },10);

, и это решило мою проблему.Надеюсь, это поможет вам.