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

Question

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

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

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

我想使用这些按钮，与jQuery，删除与后调用的项目，但问题是，我的脚本jQuery不能在通过.load（）调用的HTML工作。

我看到一些人说“use .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。我想知道的是，加载已经放在div中的.load（）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元素，该元素是动态内容的父级，因此子级上的任何事件都会冒泡到具有附加事件的父级。