Question

文件内容如下。我有一个按钮“load_button”，其click事件触发load（）函数。加载该函数的html文件包含另一个按钮“my_button”。 load（）函数的回调为“my_button”的click事件添加了一个处理程序。问题是，每次按“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');
}

的script.js

$(document).ready(function(){

     $('#page').on('click', '#my_button', function () {
//   $("#my_button").click(function()    {
        alert('COWABUNGA!');
    });

});

Answer 1

看起来您根本不需要动态加载脚本。试试看起来像这样的main.js：

$(document).ready(function(){

    $('#load_button').click(function()    {
        $("#page").load('1.html');
    });

    $('#page').on('click', '#my_button', function () {
        alert('COWABUNGA!');
    });

});

JQuery：删除已在load（）中添加的DOM对象

1 个答案: