使用 jQuery-ajax 将 HTML 加载到 <div>

【问题标题】：Loading HTML into <div> with jQuery-ajax使用 jQuery-ajax 将 HTML 加载到 <div>
【发布时间】：2013-03-22 18:32:09
【问题描述】：

我在尝试使用 jQuery-ajax 将外部 HTML 页面加载到 div 时遇到了一些麻烦。我有这个 div：<div id="content"></div> 并想用$("#content").load("include/add.html"); 填充它它完美地加载了 HTML 文件，但在 add.html 内部是一个应该加载 add2.html（也使用 .load）的按钮，但似乎该文件中的按钮和日期选择器都不起作用。我猜 .load 函数对此负责？

这是add2.html的内容：

<p>Nr: <input type="text"></input></p>
<p>Name: <input type="text"></input></p>
<p>Date: <input type="text" id="datepicker"></input></p>
<a href="#" id="button1">Next</a>

请帮忙，我很绝望：D

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

由于在事件绑定后文件包含在页面中，因此事件不适用于“add.html”中的元素。您需要再次绑定事件或使用.on() 方法。对于日期选择器，使用第一种方法更容易：

$("#content").load("include/add.html", function() {
    // Apply datepicker to elements in 'add.html'
    $('#content .date').datepicker();
});

add.html中的按钮，可以使用委托：

$(document).on('click', '#content .button_in_add', function() {
    alert("I work even when included dynamically!");
    $('#content').load('include/add2.html');
});

请注意，.on() bins 不像 datepicker 部分那样进入 .load() 回调。如果您在“add2.html”中有任何元素，您也需要为此重复相同的步骤。

【讨论】：