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

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

注意:有一次，我仅使用 datePicker 使用这种方法时遇到了一个问题，那就是在动态加载的页面中有一个 datePicker 输入，并且它是即使在调用我的 initReady() 函数并且我使用 setTimeout 函数调用我的 initReady() 函数后也没有初始化

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

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