javascript 或 jQuery 在动态生成的内容中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12022027/
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
javascript or jQuery doesn't work in dynamically generated content
提问by Tian Loon
Morning people. How to make my javascript or jquery works in dynamically generated content.
Basically, i have created web page that generates contents, base on what user clicks on the navigation menu.
The problems i am facing:
早上的人。如何让我的 javascript 或 jquery 在动态生成的内容中工作。
基本上，我创建了基于用户在导航菜单上单击的内容生成内容的网页。
我面临的问题：
- when main page generate contents from content-page, jquery or javascript won't work.
- but when i open up the content-page alone, everything works.
- 当主页从内容页面生成内容时，jquery 或 javascript 将不起作用。
- 但是当我单独打开内容页面时，一切正常。
Information collected through searching:
通过搜索收集的信息：
jQuery.load() method ignores the script tag that comes together with the that content generated dynamically.
jQuery.load() 方法忽略与动态生成的内容一起出现的脚本标记。
So i try the following:
所以我尝试以下操作：
- Put the tag that i need in main page, not in content-page. it doesn't work. seem like the jquery can't find the content element, because they are dynamically generated.
- Since jQuery.load() ignores script tag, I tried pure javascript ajax like how w3schools.com teaches, the xmlhttp way, to generate the content. It doesn't work.
- When a button is clicked. no response in console.
- 将我需要的标签放在主页上，而不是放在内容页中。它不起作用。似乎 jquery 找不到内容元素，因为它们是动态生成的。
- 由于 jQuery.load() 忽略脚本标记，我尝试了纯 javascript ajax，就像 w3schools.com 教的那样，xmlhttp 方式，来生成内容。它不起作用。
- 单击按钮时。控制台没有反应。
Examplecontact.php
示例contact.php
<script type="text/javascript">
$(function() {
$("#submitUser").click(function(e) {
var fname = $("#fname").val();
$("#theresult").text(fname);
e.preventDefault();
});
});
<form id="contactForm">
<label for='fname' >First Name</label><br/>
<input id="fname" type="text" name="fname" maxlength="100" />
</form>
<div id="theresult"></div>
When this contact.php is dynamically generated into other page, it doesn't work. When I click "submit" button, console shows no response. seem like the jquery is not exists.
But when I open it alone in browser, it works.
当这个contact.php动态生成到其他页面时，它不起作用。当我单击“提交”按钮时，控制台没有显示任何响应。似乎 jquery 不存在。
但是当我在浏览器中单独打开它时，它可以工作。
回答by undefined
For dynamically generated elements you should delegate the events, you can use the onmethod:
对于动态生成的元素，您应该委托事件，您可以使用以下on方法：
$(function() {
$(document).on('click', '#submitUser', function(e) {
var fname = $("#fname").val();
$("#theresult").text(fname);
e.preventDefault();
});
});
live()method is deprecated.
live()方法已弃用。
回答by Amber
Taking a wild stab in the dark here since your question isn't very well-described, but perhaps you're trying to use .click()and so on to bind events to things that are getting dynamically loaded into the page?
由于您的问题没有得到很好的描述，.click()因此在黑暗中进行了疯狂的尝试，但也许您正在尝试使用等等来将事件绑定到动态加载到页面中的事物？
If so, you probably want to look at .on()instead.
如果是这样，您可能想查看一下.on()。
回答by Didats Triadi
You need to use live event.
您需要使用实时事件。
As an example, if your generated content contain a click event, you could do this:
例如，如果您生成的内容包含点击事件，您可以这样做：
$(".something").live("click", function({
// do something
)};
回答by Furkat U.
For dynamically generated fields use .on() JQuery method:
对于动态生成的字段，使用 .on() JQuery 方法：
$(document).on('click', '#MyID', function(e) {
e.preventDefault(); // or you can use "return false;"
});
