2

ファイルの内容を以下に示します。クリック イベントが load() 関数をトリガーするボタン「load_button」があります。この関数で読み込まれた 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');
}

script.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 に答える