2

次のように、コンテンツを動的にロードします。

$.post('main/test', data,function(resp){
    $('#container').html(resp);
});

コンテナはそのまま<div id="container"></div>

「メイン/テスト」には次のスクリプトがあります。

$('body').on('click','#login-logs',function(e){
  e.preventDefault();
  $('#login-logs-last').toggle();
  $('#login-logs-details').toggle();
});

問題は、このページ「メイン/テスト」を複数回ロードできることです。ロードするたびに、イベントが再びバインドされます。

したがって、最初にロードして #login-logs をクリックすると、期待どおりに動作します (#login-logs-last を非表示にし、#login-logs-details を表示します) が、ページを再度ロードすると、反対に、3 回目には再び機能する、というように続きます。

問題は、この on('click','#login-logs') イベントを、最初にページを動的にロードしたときに一度だけバインドするにはどうすればよいかということです...? ページを読み込むたびに...

なんで？ユーザーがさまざまなページを前後に閲覧できるようにしたいのですが、それは「メイン/テスト」ページが複数回読み込まれることを意味します..

4

1 に答える 1

4

off()で新しいハンドラーをアタッチする前に、以前のハンドラーを削除しますon()。

$('body').off('click','#login-logs')
         .on('click','#login-logs',function(e){
              e.preventDefault();
              $('#login-logs-last, #login-logs-details').toggle();
});
于 2013-04-13T00:21:34.273 に答える