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中只是一个表单，其中包含需要诸如datepicker等内容的字段。负载工作正常。

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

它解决了我的问题。希望它能帮到你。

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

1 个答案: