web-dev-qa-db-ja.com

同様のデータをAjaxでロードする前にJQueryリスナーをクリアする

ページの左側にツリー構造があり、そこからユーザーがドリルダウンしてアイテムを選択できます。各ブランチには同様のアイテムがあります。リーフノードをクリックすると、JQuery .load（...）呼び出しを行い、リーフのデータをページの右側のdivにロードします。

ユーザーは、表示されたデータを表示および/または変更できます。ユーザーが兄弟リーフを選択した場合、.empty（）を使用して右側のdivをクリアし、新しい.load（）呼び出しを行って、新しいデータをロードします。

私の問題は、前のリーフの.on（ 'click' ....コードがまだアクティブであるということです。兄弟の.on（ 'click' ....コードは無視されます。元のリーフをもう一度クリックすると（ .loadを介してリロードされます）.on（ 'click' ....呼び出しは機能します。

以前のJQuery 'クリック'リスナーをクリアする方法はありますか、または各リーフのデータに一意のIDを設定する方法を考え出す必要がありますか？

編集：

コード例：

<div id=right_side>
    <input type="text" id="firstname">Susan</input>
    <label for="nickname">Nickname? <input type="checkbox" id="nickname"></label>
</div>
<script>window.jQuery('#nickname').on('change',function(x){console.log("changed");})</script>

上記のコードは、ツリーのリーフノードがクリックされるたびに右側のdivに読み込まれます。チェックボックス「ニックネーム」は、他のリーフノードの後続のロードで機能しなくなります。すべての葉に「ニックネーム」のIDのチェックボックスがあります。右側のdivを空にすると、関連するリスナーは（いわば）ミュートになりますが、最初のリスナーは.empty（）呼び出しの後もアクティブのままであると思いました。

javascriptjqueryhtml5
2
bh3333

表示、非表示、または変更される可能性のある要素にイベントをバインドしないでください。それらを親DIVにバインドします。

<div id="right_side">
    <input type="text" id="firstname">Susan</input>
    <label for="nickname">Nickname? <input type="checkbox" id="nickname"> </label>
</div>
<script>
    // This script must be executed only once (i.e. must not be in the loaded code).
    // Actually it would be better if it were executed from the jQuery
    // onload bootstrap call.
    // It listens on any change event on any INPUT tag inside #right_side
    // whether it has been already loaded or not.

    $('#right_side').on('change', 'input', function(x) {

        // We do not know WHICH control got changed.
        var id = $(this).attr("id");

        // We also would need some data from the left side, probably.
        // e.g. on the left side we have an A tag with data-right="foo"
        // and an onclick() that clears the .clicked class from all
        // tree's As, then adds the .clicked class to that A only.
        // This way $('#tree a.clicked').attr("data-right") will tell us
        // which A determined the loading of the right-hand panel.

        console.log("input with id " + id + " has changed");

    });
</script
0
LSerni