javascript 或 jQuery 不适用于动态生成的内容

Question

早起的人。如何让我的 javascript 或 jquery 在动态生成的内容中工作。

基本上，我已经根据用户在导航菜单上单击的内容创建了生成内容的网页。

我面临的问题：

1. 当主页从 content-page 生成内容时，jquery 或 javascript 将不起作用。
2. 但是当我单独打开内容页面时，一切正常。

通过搜索收集的信息：

jQuery.load() 方法会忽略与动态生成的内容一起出现的脚本标签。

所以我尝试以下方法：

1. 将我需要的标签放在主页面中，而不是在内容页面中。它不起作用。好像 jquery 找不到内容元素，因为它们是动态生成的。
2. 由于 jQuery.load() 忽略脚本标签，我尝试了纯 javascript ajax，如 w3schools.com 的教学方式，xmlhttp 方式，生成内容。它不起作用。
3. 单击按钮时。控制台无响应。

---

示例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>

当这个contact.php被动态生成到其他页面时，它不起作用。当我单击“提交”按钮时，控制台没有显示任何响应。好像 jquery 不存在。
但是当我在浏览器中单独打开它时，它可以工作。

Answer 1

对于动态生成的元素，您应该委托事件，您可以使用on 方法：

$(function() {
    $(document).on('click', '#submitUser', function(e) {
       var fname = $("#fname").val();
       $("#theresult").text(fname);
       e.preventDefault();
    });
});

live() 方法是deprecated。

Answer 2

由于您的问题没有很好地描述，因此在这里暗中尝试，但也许您正在尝试使用.click() 等将事件绑定到动态加载到页面中的内容？

如果是这样，您可能想查看.on()。

Answer 3

您需要使用直播活动。

例如，如果您生成的内容包含点击事件，您可以这样做：

$(".something").live("click", function({ 
// do something
)};

Answer 4

对于动态生成的字段，使用 .on() JQuery 方法：

$(document).on('click', '#MyID', function(e) {
    e.preventDefault(); // or you can use "return false;"
});