Question

我在尝试使用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

Answer 1

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

$("#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()二进制文件不会像datepicker部分那样进入.load()回调。如果“add2.html”中有任何元素，则还需要重复相同的步骤。

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

1 个答案: