在通过 AJAX 加载的 DOM 中运行动态注入的 javascript（尝试使用 history.js 对网站进行 ajaxify）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10727086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run dynamically injected javascript in DOM loaded via AJAX (attempting to ajaxify website with history.js)
提问by Casey Flynn
I have a web application that essentially has header, footer and body views. I'm working on ajaxifying the website, using the history.js library and HTML5 pushstate, but one of the problems I'm experiencing is getting embedded javascript to run when the javascript is inserted into the DOM.
我有一个 Web 应用程序，它基本上具有页眉、页脚和正文视图。我正在使用 history.js 库和 HTML5 pushstate 对网站进行 ajaxifying，但我遇到的问题之一是在将 javascript 插入到 DOM 时让嵌入式 javascript 运行。
Pretty much all my javascript is wrapped in jQuery(function(){ ... }) (document on-ready loader)
我几乎所有的 javascript 都包含在 jQuery(function(){ ... }) 中（文档加载器）
Does anyone know a good strategy for dealing with this? Thanks!
有谁知道处理这个问题的好策略？谢谢！
回答by jatrim
If I understand you, your "page" is just a container for HTML you're loading dynamically. Within that HTML you have JavaScript script blocks that currently do not execute. Is that correct? Are they in page scripts or links to new script files?
如果我理解你，你的“页面”只是你动态加载的 HTML 的容器。在该 HTML 中，您有当前未执行的 JavaScript 脚本块。那是对的吗？它们是在页面脚本中还是在指向新脚本文件的链接中？
In any case, I think this answers your question: How do you execute a dynamically loaded JavaScript block?
无论如何，我认为这回答了您的问题：您如何执行动态加载的 JavaScript 块？
My own thoughts:
我个人的想法：
Unless your container is incredibly generic, and so cannot know what JavaScript you might need, the simplest approach is probably to just manually attach all of your JavaScript to your container page, so that it loads with the container, perhaps minified and concatenated into a single file.
除非您的容器非常通用，因此无法知道您可能需要什么 JavaScript，否则最简单的方法可能是手动将所有 JavaScript 附加到您的容器页面，以便它与容器一起加载，可能会缩小并连接成一个文件。
If you need to load your scripts dynamically, but you know what they are, you can do so with jQuery using .getScript() or .ajax(). I thought this page spelled things out nicely, http://www.electrictoolbox.com/jquery-dynamically-load-javascript-file/.
如果您需要动态加载脚本，但您知道它们是什么，则可以使用 jQuery 使用 .getScript() 或 .ajax() 来实现。我认为这个页面很好地说明了事情，http://www.electrictoolbox.com/jquery-dynamically-load-javascript-file/。
Similarly, if you don't know what scripts you need until after you grab your html block, you could probably parse the html for script links and attach them manually via new script elements added to the page. As an example, the script below adds jQuery to the page if it does not already exist.
同样，如果在获取 html 块之前不知道需要哪些脚本，您可能可以解析 html 以获得脚本链接，并通过添加到页面的新脚本元素手动附加它们。例如，如果 jQuery 尚不存在，下面的脚本会将其添加到页面中。
(function () {
if (typeof(jQuery) == "undefined") {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.id = 'myjQuery';
newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js';
headID.appendChild(newScript);
}
window.addEventListener('load', function (e) {
//make jQuery calls here.
}, false);
})();
回答by osdamv
use .on, I don't going to explain al the behavior of that function but in few words:
使用.on，我不打算解释该函数的所有行为，而是用几句话来解释：
work through bubbling elements on the dom for example you bind "onclick" to a div you can set to some or all of his children have x behavior
处理 dom 上的冒泡元素，例如您将“onclick”绑定到一个 div，您可以将其设置为他的部分或所有孩子有 x 行为
