我无法选择使用 jquery 动态创建的 html 元素
Posted
技术标签:
【中文标题】我无法选择使用 jquery 动态创建的 html 元素【英文标题】：I can't select an html element that was created dynamically with jquery 【发布时间】：2017-08-02 15:22:53 【问题描述】：我有一个 html 文件
<body>
<div id="content">
</div>
</body>
然后我用js动态改变内容
$.get("foo.html", function(data)
$("#content").html(data);
);
foo.html 是一个看起来像这样的外部 html 文件
<span id="results">
</span>
这可以改变我页面的内容。我已经检查了 Chrome 的开发工具，页面现在看起来像这样
<body>
<div id="content">
<span id="results">
</span>
</div>
</body>
太好了。现在我想用 jQuery 显示一些结果
$("#results").text("some text");
这最后一部分不起作用。我只能假设这是因为#results 是动态创建的。我知道事件处理程序存在这个问题，并使用on 而不是click，但这里不是这种情况。我只是想选择元素。
当然，我的实际代码要复杂得多，而且我遗漏了一些内容。如果您认为还有其他可能导致问题的原因，请告诉我，我会检查。
【问题讨论】：
您的结束标签无效 - 只是在这里，还是在您的实际代码中？ 正确关闭</span>。
什么时候调用 $("#results").text("some text"); ?即，您如何确保在拨打电话之前加载页面内容？
你把这个$("#results").text("some text");声明放在哪里了？它应该是在您的 AJAX 调用完成并且您将新内容插入 DOM 之后。
谢谢@fbuendia，这就是问题所在。我 95% 确定它不是，但我再次检查了我的代码，它是。
【参考方案1】：
$.get 是一个异步函数，这意味着它在继续之前不会等待完成。 jQuery 解决这个问题的方法是使用回调函数。在这里，我们定义了一个回调函数。我们需要将文本修改放在 $.get 回调中。
<body>
<div id="content">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$.get("foo.html", function(data) //$.get callback function(data)
$("#content").html(data);
$("#results").text("some text");
);
</script>
【讨论】：
如果 O/p 想在其他时候设置它怎么办？ 那么，@ILike，OP 应该在问题中说明这一点。【参考方案2】：-
你有一个无效的结束标签
</span 应该是 </span>
当您对它进行操作时，请确保 <span id="results"> 存在于该页面上。因为您是动态加载内容，所以存在竞争条件，因此在加载后对其进行操作：
$.get(…).done(function()
$('#results').text('foo')
);
除此之外，还需要显示更多信息，可能是小提琴或代码 sn-p。
【讨论】：
以上是关于我无法选择使用 jquery 动态创建的 html 元素的主要内容，如果未能解决你的问题，请参考以下文章
当每个下拉列表动态创建ID时，jquery选择选项数据和值[关闭]