2017-01-17 4 views
-2

私が行っているセットアップでは、PHPスクリプトにajaxリクエストを行い、サーバーからいくつかのイメージを取得して表示します。 Ajaxリクエスト中に、私はいくつかの追加コントロールを有効にします。画像には2つのモードがあります.1つは画像のより大きなバージョンを表示し、もう1つは画像を並べ替えるモードです。jQuery .off()イベントを削除しない

私は2つのモードを入れ替えることができるようにチェックボックスを実装しました。検索をクリックしてajaxリクエストを呼び出すたびに、イメージは作成時にチェックボックスが持っていたモードに対応します。

私がしたいことは、チェックボックスをクリックすると、再度検索することなくモードを入れ替えることができるということです。

$.ajax({ 
    url: './search.php', 
    type: 'POST', 
    success: function(data) { 
     $("#images").html(data); 
     enableControls(); 
    }, 

これは画像を受信し、ページに追加してコントロールを有効にするajaxリクエストのスニペットです。

$('#sortable').change(function() { 
    enableControls(); 
}); 

これは、チェックボックスでコントロールの状態を変更できるスニペットです。

function enableControls() { 
    $('.img-responsive').off(); 
    if($('#sortable').is(":checked")) { 
     $('.img-responsive').on('dblclick', sortableDoubleClick); 
    } 
    else { 
     $('.img-responsive').on('dblclick', imgDoubleClick); 
    } 
} 

これは、ダブルクリックの動作を有効にするスニペットです。並べ替えモードでダブルクリックすると、その画像が画像の行/列の前面(左上)に移動します。ノンソートモードでダブルクリックすると、より大きなバージョンの画像が表示されます。

img-responsiveクラスは、検索対象から返されたすべてのイメージで、クラスとして参照するクラスです。

残念ながら、ライン

$('.img-responsive').off(); 

は、私はそれがしたいように動作しません。既存のコントロールを完全に無効にして、新しいものを設定することができます。それはしません。今のところ、ダブルクリックコントロールを利用できるようになります。

だから、私は非ソートモードで検索し、私のチェックボックスをクリックしてソートモードにするとしましょう。画像をダブルクリックすると、大きな画像が開き、左上に移動します。

どうすればこの問題を解決できますか? .off()を呼び出す方法は間違っていますが、私が理解する限り、.off()はセレクタのすべてのイベントハンドラを削除する必要があります。なぜ元のイベントハンドラを保持しているのでしょうか?

答えて

1

私は私の問題を解決しました。コードの一部では:

$('.img-responsive').on('dblclick', imgDoubleClick); 

タッチコントロールのためのいくつかの追加のコードがありました:

$('.img-responsive').each(doubletapCover); 

が何らかの理由で、そのコードパスが発生したことがないにも関わらず、そのコードを呼び出すように見えました。私は変更を加えたので、それは今までに呼ばれておらず、私の問題を解決しています。

お手伝いをしてくださった皆様、ありがとうございます。

+0

良い仕事の仲間。 。 –

関連する問題