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 控制台，我收到一条错误消息：

类型错误：$("#btn") 为空

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

我在这里做错了什么？

Answer 1

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

$('#btn')绑定到页面加载/DOM 就绪时存在于 DOM 中的元素将被追加的最近元素。

假设您正在加载$('#btn')（#container div例如），给出：

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

然后使用：

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

Answer 2

用于.on将事件连接到您的按钮。检查这个答案：

动态创建元素的事件绑定？

$(document).ready(function() {
    $('body').on('click', '#btn', function() {
        alert("Hello");
    });
})

编辑：我添加了文档就绪代码，您需要确保这样做。

固定的。

Answer 3

您正在寻找 .on ，它将点击事件绑定到动态添加的节点。

$("#parent_container").on("click", "#btn", function () {
    alert("hello")
})

文档：http ://api.jquery.com/on/

Answer 4

尝试

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

    $('#btn').on('click', function() {
        alert("Hello");
    });

</script>

Answer 5

您的代码中的问题是您在创建按钮之前将事件附加到按钮。

正确的版本是：

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

这应该可以完成这项工作。

Answer 6

使用.live()jQuery的功能