javascript - 使用 jQuery 访问动态创建的项目？

Question

我有一个页面，其中一些 html 被动态添加到该页面。

这是创建的 html 和 javascript:

<div>
    <script type="text/javascript" language="javascript">
        $('#btn').click(function() {
            alert("Hello");
        });
    </script>

    <a id="btn">Button</a>
</div>

查看我的 Firebug 控制台，我收到一条错误消息:

TypeError: $("#btn") is null

jQuery 最初是在页面上加载的。

我在这里做错了什么？

Answer 1

您必须将 on()(或 on() 方法中定义的事件)绑定(bind)到 DOM 中存在的元素jQuery 已运行。通常这是在 $(document).ready() 或类似的地方。

在页面加载/DOM 准备就绪时，绑定(bind)到 DOM 中将附加 $('#btn') 元素的最近元素。

假设您正在将 $('#btn') 加载到 #container div 中(例如)，给:

<div id="container">
    <div>
        <a href="#" id="btn">Button text</a>
    </div>
</div>

然后使用:

$('#container').on('click', '#btn', function(){
    alert('Button clicked!');
});