如何从使用 load() 函数加载的内容中触发 jQuery 脚本

Question

我正在使用 jQuery AJAX 从选项列表中将不同的内容加载到表格单元格中，效果很好。但是，加载的内容包括一个按钮 (class=addButton)，当单击该按钮时，它也应该触发内容加载，但它不会。是否有可能获取加载的内容以触发包含在主页中的脚本，如果没有，是否有任何其他方式将脚本嵌入到加载的内容中。

// Scripts embedded in the main page
$("#menu1").click(function(){
        $("#div1").load("Menu1Content.html");
    })
$(".addButton").click(function(){
        $("#div1").load("AddFormForMenu1Content.html");
    })

//主页面内容

<table >
 <tr>
  <td id='#menu1'>Menu 1</td>
  <td id='#div1'>Content goes here</td>
 </tr>
</table>

//Menu1Content.html

<button class='addButton'>ADD</button>

//AddFormForMenu1Content.html

<button id='menu1'>SUBMIT</button>

基本流程如下：

1. 选择菜单选项 - 在面板中显示内容
2. 在面板中执行操作
3. 显示原创内容

请注意，实际内容是使用 php 从数据库动态加载的。上面的例子只是用静态html来说明。

Answer 1

在这种特定情况下，您可以使用on 而不是click。这样，您可以将 click 事件绑定到文档，并使其响应对与所选元素匹配的任何元素的点击，而不管它们是何时添加的：

$(document).on("click", "#menu1", function(){
    $("#div1").load("Menu1Content.html");
});
$(document).on("click", ".addButton", function(){
    $("#div1").load("addDeviceForm.php");
});