2

文件内容如下。我有一个按钮“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!');
    });

});
4

1 回答 1

2

看起来您根本不需要动态加载脚本。尝试如下所示的 main.js：

$(document).ready(function(){

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

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

});
于 2013-01-17T14:52:00.457 回答