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

Question

尝试使用jQuery-ajax将外部HTML页面加载到div中时遇到了一些麻烦.我有这个div:<div id="content"></div> 并希望用$("#content").load("include/add.html"); 它填充它完全加载HTML文件,但在add.html内部是一个按钮,应该加载add2.html(也使用.load),但它似乎既不是按钮也不是datepicker在该文件中工作.我猜是.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()bin不会.load()像datepicker部分那样进入回调.如果'add2.html'中有任何元素,则还需要重复相同的步骤.