javascript或jQuery在动态生成的内容中不起作用

Question

早上的人.如何使我的javascript或jquery在动态生成的内容中工作.

基本上,我创建了基于用户点击导航菜单的内容生成内容的网页.

我遇到的问题:

1. 当主页面从内容页面生成内容时,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()方法已弃用.