jQuery的.load（）不加载JavaScript的加载内容 [英] Jquery .load() is not loading javascript in loaded content

问题描述

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

I know this has been asked many times but i'm yet to find a clear and helpful answer so I thought i'd write the question again in a clearer format?

当您使用.load（）函数，你有JavaScript的需要加载的文件中运行它不工作，我猜的DOM已加载的问题。

The problem is when you use the .load() function and you have javascript that needs to run in the loaded file it doesn't work as I'm guessing the DOM has already loaded.

解决这个问题的简单的方法是只需再次加载的JavaScript加载的文件里面，但是如果你有很多的得到加载其JavaScript的所有的地方的文件是不是很好的做法。

The easy way around this is to just load the javascript again inside the loaded file but If you have a lot of files that get loaded having javascript all over the place isn't very good practice.

是否有任何人知道这样做的好方法吗？

Does any one know of a good way of doing this?

这是亲如我能得到它是相当整齐??

This is as close as I could get it to being reasonably tidy??

<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很简单，就是有需要像日期选择器等领域的一种形式 负载工作正常。

Inside the file.php is simply a form that has fields that require things like datepicker etc. The load is working fine.

推荐答案

如果我理解你的问题那么我认为你应该换所有的JavaScript函数（需要在每次成功的Ajax调用之后要执行的）像一个函数内部

If I understood your question then I think you should wrap all of your javascript functions (that needs to be executed after every successful ajax call) inside a single function like

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

和您的document.ready事件应该像下面的一个

and your document.ready event should be like following one

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

和当你需要一个Ajax调用成功后初始化一些动态内容，只需调用initReady（）函数如下

and whenever you need to initialize some dynamic content after an ajax success call just call the initReady() function as following

initReady();

在你的情况你可以做你的成功回调里面像下面

In your case you can just do it inside your success callback like the given code below

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

所以每次你没有时间来写所有的JavaScript code你的每一个成功的AJAX回调函数内并且也可以节省您的时间和保持你的code干净。

So every time you don't have to write all javascript code inside your every ajax success callback function and also it'll save your time and keep your code clean.

注意：一旦我使用这种方法只能用日期选择器，这是在一个动态加载的页面有一个日期选择器的输入，这是面临的一个问题未初始化即使我initReady（）函数被调用，比我用setTimeout函数调用我initReady（）函数

Note : Once I've faced a problem using this approach only with a datePicker and it was that in a dynamically loaded page there was a datePicker input and it was not being initialized even after my initReady() function has been called and than I used setTimeout function to call my initReady() function

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

和它解决了我的问题。希望它会帮助你。

and it solved my problem. Hope it'll help you.

这篇关于jQuery的.load（）不加载JavaScript的加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！