Jquery .load()未在加载的内容中加载javascript

我知道这已被问过很多次,但我还没有找到一个明确而有用的答案,所以我想我会以更清晰的格式再次提出这个问题？

问题是当你使用.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等内容的字段.
负载工作正常.

解决方法

如果我理解你的问题,那么我认为你应该在一个函数中包装所有的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);

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

原文链接：https://www.f2er.com/jquery/178987.html

Jquery .load()未在加载的内容中加载javascript

解决方法

猜你在找的jQuery相关文章