Question

我有一个网页，我一直在玩jQuery。

它有几个动画，一些.post的东西，还有一个div .load（）每隔5秒就有一个页面。

在这个列出一堆数据库条目的.load（）数据中，我在每个条目旁边都有删除按钮。

我想使用jQuery的那些按钮来删除带有post调用的项目，但问题是，我的脚本中的jQuery对通过.load（）调用的html不起作用。

我见过有人说“使用.on”，但是我无法找到如何使用它来实现我的目标，非常感谢你们的一些见解。

以下是我的例子：

HTML：

<div id="load_data">

</div>

jQuery的：

$(document).load(function(){

    $("#load_data").load('test.html');

    $("#change_loaded").click(function(){

        $("#loaded").empty().append('Now the data is updated.');
    })

})

的test.html

<button id="change_loaded">Click</button>

<div id="loaded">

This is what I want to change with the jQuery but it isn't working

</div>

通过这个例子，当我点击change_loaded按钮时，它没有做任何事情，因为尚未为该页面加载jQuery。我想知道的是，为使用.load（）放入div的html加载jQuery代码的正确方法是什么。

谢谢！

Answer 1

您需要为动态内容

指定一个委托事件处理程序

$(document).ready(function(){
    $("#load_data").load('test.html');
    $("#load_data").on('click', '#change_loaded', function(){
           $("#loaded").empty().append('Now the data is updated.');
    });
});

Answer 2

原因是因为DOM加载时绑定了事件侦听器。插入动态内容时，不会附加任何事件侦听器。通过使用.on，您可以将侦听器委派给静态DOM元素，该元素是动态内容的父节点，因此子节点上的任何事件都将冒泡到附加了事件的父节点。

对已加载.load（）的数据使用jQuery脚本

2 个答案: