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”）为空

最初在页面上加载了jQuery。

我在这里做错了什么？

Answer 1

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

绑定到将在页面加载/ DOM就绪的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!');
});

Answer 2

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

Event binding on dynamically created elements?

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

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

固定。

Answer 3

你正在寻找.on这里将click事件绑定到动态添加的节点。

$("#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

使用jQuery的.live()功能

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

6 个答案: