文件内容如下。我有一个按钮“load_button”，其单击事件会触发 load() 函数。加载该函数的 html 文件包含另一个按钮“my_button”。 load() 函数的回调为“my_button”的点击事件添加了一个处理程序。问题是，每次我按下“load_button”时，都会添加一个新的单击事件处理程序，并且事件处理程序中的警报会多次弹出。我想在创建新的事件处理程序之前删除先前创建的“my_button”及其事件处理程序。我尝试添加以下命令，并在下面的文件描述中将其注释掉。
$('#page').empty();
运气不好。我想要一个通用的解决方案，因为我将删除其他 DOM 对象。我怎样才能删除它们？
另外，当我更换时它不起作用
$('#page').on('click', '#my_button', function () {
与
$("#my_button").click(function() {
为什么不起作用？ load() 的回调函数不是应该在加载完成并且 DOM 对象可用之后运行吗？
main.html
<html>
<head>
...
<script src="main.js"></script>
</head>
<body>
...
<a id="load_button">Load!</a>
<div id="page">
</div>
</body>
</html>
1.html
<div>
<a id="my_button">Go!</a>
</div>
main.js
$(document).ready(function(){
$('#load_button').click(function() {
// $('#page').empty();
$("#page").load('1.html', load_scripts());
});
});
function load_scripts() {
$.getScript('script.js');
}
脚本.js
$(document).ready(function(){
$('#page').on('click', '#my_button', function () {
// $("#my_button").click(function() {
alert('COWABUNGA!');
});
});
最佳答案
看起来您根本不需要动态加载脚本。尝试使用如下所示的 main.js:
$(document).ready(function(){
$('#load_button').click(function() {
$("#page").load('1.html');
});
$('#page').on('click', '#my_button', function () {
alert('COWABUNGA!');
});
});
关于javascript - jQuery : Removing DOM objects that have been added in load()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14381635/