jQuery .load（）未在加载的内容中加载javascript

小编典典

jQuery .load（）未在加载的内容中加载javascript

ajax

我知道这个问题已经被问过很多次了，但是我还没有找到一个明确而有用的答案，所以我想我会以更清晰的格式写这个问题吗？

问题是，当您使用.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内部，只是一种表单，其中包含需要datepicker等内容的字段。加载工作正常。

阅读 316

2020-07-26

共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();    
}

因此，每次您不必在每个ajax成功回调函数中编写所有javascript代码时，它还可以节省您的时间并保持代码整洁。

注意： 一旦我仅使用 datePicker
遇到使用此方法的问题，并且是在动态加载的页面中有datePicker输入，即使在调用了initReady（）函数之后，也没有初始化它，
setTimeout函数调用我的initReady（）函数

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

它解决了我的问题。希望对您有帮助。

2020-07-26