クリックを2回実行する

http://jsfiddle.net/uTV5k/19/

こんにちは、

私は自分のモバイルサイトで以下のスクリプトを使用しています。シミュレートされたスクリプトとマークアップのjsfiddleを見てください。

以下のスクリプトはまさに私のモバイルサイトにあるもので、jsフィドルはそれの複製です。

jsfiddleでは、クリック交互にうまく動作します。最初のクリックでアニメーションが開き、2回目のクリックでアニメーションが閉じます。

The problem on my mobile site, the first click opens the animation, and the second animation runs immediately after with-out a second click. But in the fiddle it runs OK.


$(window).load(function(){

    $(window).bind("orientationchange resize", function(e) {

        $('.home-mod').each(function() {

            var homeModule  = $(this).height(),
                homeTitle   = $(this).find('.home-title-button').outerHeight(),
                homeStart   = homeModule - homeTitle,
                homeOpen    = false;

            $(this).find('.mod-info').css("top", homeStart + "px");

            $(this).on('click', function() {

                if (homeOpen) {

                   //second click alternation
                    $(this).find('.mod-info').animate({ top: homeStart + "px" });
                    homeOpen = false;

                } else {

                   //first click alternation
                    $(this).find('.mod-info').animate({ top: 0 });
                    homeOpen = true; 

                }
            });

        }); 

    }).trigger("resize");

});



I'm really not sure why this would be happening. Using this in iScroll shouldnt cause any problems should it?

Thanks in advance

0
@AnthonyGrist私はそれがあなたが言っているようなものでなければならないと思う。それはちょうどそのダブルクリックを実行しているようです。私のコードとの唯一の違いは、iScrollにあることです。私は私のエラーを再現できるかどうかを見て別のフィドルを投稿します。
追加された 著者 Joshc,
あなたがフィドルがあなたが引用したコードの複製であると言うとき、本当にそれが本当であると確信させるべきです。この場合はそうではありませんでした。これは、人々があなたの質問に答えるのが難しくなった可能性があります。
追加された 著者 Chris,
あなたのコードの問題ではなく、2つのクリックイベントを送信するブラウザに問題があるように思えます。私は間違っているかもしれません。
追加された 著者 Anthony Grist,

2 答え

一番最初に:ウィンドウロードが起こる

あなたは電話している

.trigger("resize");

クリック時にバインドを有効にします。

later on - if the window load happens again - it retrigger the code which again - re bind the click

3
追加された
@AnthonyGristはよく見る。ウィンドウがロードされ、resizeイベントがバインドされます。クリックイベントの処理方法を教えてくれます。後で彼は再びreisizeをトリガし、再び彼にクリック機能を追加させる
追加された 著者 Royi Namir,
私はまずそれを考えました。引用符で囲まれたコードと何が関係しているのかわからないのですが、クリックがresizeイベントの中から設定されているので、複数のサイズ変更や向きの変更が「エンターテイメント」を引き起こす可能性があります。
追加された 著者 Chris,
@RoyiNamir:あなたが引用した行は、それが一度追加される原因になります。そのイベントが他の場所で発生した場合にのみ、複数のクリックが追加されます。あなたの答えは幾分混乱しているように思えます。
追加された 著者 Chris,
@AnthonyGrist:フィドルは悲しいことに同じではありません(サイズ変更ハンドラがありません)。私の答えを見ると、私はバグの複製としてこのコードを作成し、新しいものを追加する前に.offを使ってクリックを削除するように修正しました。私はクロージャーを使って何度もリバインドする必要がなくなりましたが、最小限のコード書き換えでよりシンプルなアプローチに行きました。
追加された 著者 Chris,
なぜすべてのループで? .trigger( "resize")は、resizeイベントハンドラの一部ではありません。
追加された 著者 Anthony Grist,
@RoyiNamir私がしなければならないのは、質問に含まれているコードと同じであると仮定されたjsFiddleをチェックすることでした(そして、うまく動作すると言われました)。あなたは非常にうまくいくかもしれません、見つけ出すのに十分なはずです。
追加された 著者 Anthony Grist,

あなたのフィドルコードとライブコードの違いは、サイズ変更/オリエンテーションハンドラの存在です。

あなたの他のコードはすべて、あなたのサイズ変更ハンドラを実行するたびに実行されるという意味です。 http://jsfiddle.net/uTV5k/20/ は、そのハンドラを使ったあなたのフィドルの変形ですそれはひどく不調です。

これを修正するには、 .off( 'click')を使用して新しいクリックハンドラを追加する前に、古いクリックハンドラを削除します。

This fiddle includes this update and seems to behave again: http://jsfiddle.net/uTV5k/21/

この問題を解決するもう1つの方法は、オンサイズで必要な値を再計算し、よりグローバルに保存することです。その後、クリック機能を一度追加してこれらのグローバル値を参照することができます。これははるかに大きなコードの書き換えです、私はちょうどあなたの問題を強調する非常に簡単な修正に行きました。

0
追加された
ええ、オリエンテーションの部分が問題を引き起こしていると考えました。私はあなたのスニペットを試しました.. $(this)off( 'click')on( 'click'、function(){でもまだ同じことをしました。私はダブルクリックのように反応します。非常に奇妙です。
追加された 著者 Joshc,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript