javascript 使用 jQuery 访问动态创建的项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12325575/
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
Access dynamically created items using jQuery?
提问by Steven
I have a page where some html is being dynamically added to the page.
我有一个页面，其中一些 html 被动态添加到页面中。
This is the html and javascript that is created:
这是创建的 html 和 javascript：
<div>
<script type="text/javascript" language="javascript">
$('#btn').click(function() {
alert("Hello");
});
</script>
<a id="btn">Button</a>
</div>
Looking in my Firebug console, I get an error that says:
查看我的 Firebug 控制台，我收到一条错误消息：
TypeError: $("#btn") is null
类型错误：$("#btn") 为空
jQuery is being loaded on the page initially.
jQuery 最初正在页面上加载。
What am I doing wrong here?
我在这里做错了什么？
回答by David says reinstate Monica
You have to bind on()(or the events defined within the on()method, to an element that exists in the DOM at the point at which the jQuery was run. Usually this is on $(document).ready()or similar.
您必须绑定on()（或on()方法中定义的事件，绑定到运行 jQuery 时存在于 DOM 中的元素。通常这是 on$(document).ready()或类似的。
Bind to the closest element in which the $('#btn')element will be appended that exists in the DOM on page-load/DOM ready.
绑定到$('#btn')页面加载/DOM 就绪时存在于 DOM 中的元素将被附加到的最近元素。
Assuming that you're loading the $('#btn')into the #containerdiv(for example), to give:
假设你正在加载$('#btn')到#containerdiv（例如）中，给出：
<div id="container">
<div>
<a href="#" id="btn">Button text</a>
</div>
</div>
Then use:
然后使用：
$('#container').on('click', '#btn', function(){
alert('Button clicked!');
});
回答by Gromer
Use .onto wire up the event to your button. Check this SO answer:
用于.on将事件连接到您的按钮。检查这个SO答案：
Event binding on dynamically created elements?
$(document).ready(function() {
$('body').on('click', '#btn', function() {
alert("Hello");
});
})
Edit: I added the document ready code, you'll want to make sure you do that.
编辑：我添加了文档就绪代码，您需要确保这样做。
Fixed.
固定的。
回答by Mark
you are looking for .on here which will bind the click event to dynamically added nodes.
您正在此处寻找 .on ，它将单击事件绑定到动态添加的节点。
$("#parent_container").on("click", "#btn", function () {
alert("hello")
})
the docs: http://api.jquery.com/on/
回答by jtheman
Try
尝试
<div>
<a id="btn">Button</a>
</div>
<script>
$('#btn').on('click', function() {
alert("Hello");
});
</script>
回答by Catalin MUNTEANU
The problem in your code is that you are attaching the event to the button before the button is being created.
您的代码中的问题是您在创建按钮之前将事件附加到按钮。
Correct version is:
正确的版本是：
<div>
<a id="btn">Button</a>
<script type="text/javascript" language="javascript">
$('#btn').click(function() {
alert("Hello");
});
</script>
</div>
This should do the job.
这应该可以完成工作。
