3

私は2つのhtml要素を持っています：AとB、ここにjqueryコードがあります：

$('A').click(function(){
    $('B').click(function(){
        console.log("hello");
    })
})

AをクリックしてからBをクリックすると、「こんにちは」と表示されます。これで問題ありません。しかし、もう一度AをクリックしてからBをクリックすると、今度は2つの「こんにちは」が表示されます。これは望ましくありません。こんにちは、1つだけ欲しいです。

私は多かれ少なかれ理由を知っています、それはコールバック関数の結果であるかもしれません：Bはまだユーザーが最初のクリックの後にそれをクリックするのを待っています。

今私の質問は、「クリックA」内で「クリックB」が必要な場合（「クリックB」は「クリックA」のコールバック関数です）、二重結果の問題をどのように解決できますか？

コールバック関数は初めてです。助けてください!!!

4

3 に答える 3

4

あなたの現在のコードは、あなたが思っていることを完全には実行していません。クリックするたびAに、に新しいクリックハンドラが追加されBます。したがって、A3回クリックすると、3つのクリックハンドラーがオンBになり、Bがクリックされたときにすべてが実行されます。

1つの修正は、Asクリックハンドラー内のBsクリックハンドラーの登録を解除することです。例：

$('A').click(function(){
    // Ensure we only ever have one click-handler on B
    // by clearing existing handlers before adding our
    // new one.
    $('B').unbind('click').click(function(){
        console.log("hello");
    })
})

ただし、このコードには、不要な可能性のあるすべてのハンドラーを削除するという副作用がBあります。特定のハンドラーのみを削除するより堅牢なバージョンは、匿名ハンドラーではなく名前付きハンドラーを作成し、それを追加および削除することです。これにより、必要な特定のハンドラーをターゲットにすることができます。名前空間を使用してこれを行うこともできます（バインド解除のドキュメントを参照し、「名前空間」を探してください）。

var helloHandlerForB = function() { console.log("hello"); };

$('A').click(function(){
    // Ensure we only ever have one click-handler on B
    // by clearing existing handlers before adding our
    // new one.
    $('B').unbind('click', helloHandlerForB).click(helloHandlerForB);
})
于 2012-07-25T09:30:38.670 に答える
1

ブール値を作成して、がクリックされたかどうかを確認することもできます。

例：フィドル

var aIsClicked = false; //boolean

$('#A').click(function(){
   $('#log').html('clicked on A');
   aIsClicked = true;
});

$('#B').click(function(){
   if(aIsClicked) //check if a was clicked
   {
       $('#log').html('clicked on B and A was clicked');
       alert("hello");
   }
    else
    {
        $('#log').html('clicked on B and A was not clicked');
    }
});​

</ p>

于 2012-07-25T09:34:38.397 に答える
1

問題は、を連続してクリックするたびに、Aに別のクリックハンドラーが追加されることBです。をクリックすると、これらの各ハンドラーが実行されますB。したがって、10回クリックすると、10個のクリックハンドラーが:-DAにバインドされます。B

他のソリューションの問題、両方とも厄介な定数のアンバインドおよび再バインド、およびグローバル変数を回避するには、代わりにこのクリーンなソリューションを使用してください。

$('A').one("click", function(){
    $('B').click(function(){
        console.log("hello");
    })
})

クリックの代わりにを使用.one()すると、クリックイベントオンAが1回だけトリガーされ、1つのクリックイベントハンドラーが要素にバインドされますB。

フィドルの例

于 2012-07-25T09:54:00.930 に答える