4

乗組員を一覧表示するページ（show_crew.php）があります。このページは、Google画像検索と同様に、無限スクロールプラグインで実行されます。最初に、10個のエントリを表示します。ユーザーがshow_crew.phpの一番下に到達すると、新しい'show_crew.php'が古いものに追加され、次の10個のエントリが表示されます。

show_crew.phpに埋め込まれたいくつかのJquery関数を積み上げ、イベントをバインドします。 

$('body').on('click', 'myButton[rel=<? echo $user['id'] ?>]', function() {
    console.log('foo');
})​

現在、show_crew.phpが複数回追加されるため、イベントも同じボタンに複数回バインドされます。私は毎回この問題を修正することができます$('body').off('click', 'myButton')。

これは醜いです。もっとエレガントな方法はありますか？

ありがとう、マット

4

1 に答える 1

20

委任されたイベントをバインドする必要があるのは1回だけです。コンテンツが読み込まれるたびに再バインドしないでください。

の形式を使用する$('body').on('click', '...selector...', function () {...})と、イベントハンドラーが<body>要素に委任されます。これが意味するのは、本体がすべてのイベントをキャッチしclick、それらがに一致する要素で発生したかどうかをチェックすること...selector...です。発生した場合は、一致した要素でトリガーされたかのようにイベントハンドラーがトリガーされます。

デリゲートリスナーを追加すると、の子が変更される可能性があるため、再バインドについて心配する必要はありません<body>。デリゲートは新しい要素に対して存続します。これはとても良いことです™。

于 2012-09-19T14:06:23.243 に答える