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>

基本流程如下：

选择菜单选项 - 在面板中显示内容
在面板中执行操作
显示原始内容

请注意，实际内容是使用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");
});

如何从使用load（）函数加载的内容触发jQuery脚本

1 个答案: