使用jQuery访问动态创建的项

Access dynamically created items using jQuery?

本文关键字：创建 动态 jQuery 访问 使用      更新时间：2023-09-26

我有一个页面，其中一些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"）为空

jQuery最初加载在页面上。

我在这里做错了什么？

您必须将on()（或在on()方法中定义的事件）绑定到运行jQuery时DOM中存在的元素。通常这是在$(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!');
});

使用.on将事件连接到按钮。检查此SO答案：

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

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

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

已修复。

您正在查找的

.on，它将把点击事件绑定到动态添加的节点。

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

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

尝试

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

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

正确的版本是：

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

这应该能胜任工作。

使用jQuery 的.live()函数

相关文章：