click（）イベントがjqueryで2回呼び出される

リンク要素を設定してjqueryでそのクリックイベントを呼び出しましたが、クリックイベントが2回呼び出されています。jqueryのコードの下をご覧ください。

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

お知らせ下さい。

ありがとう。

HTMLページに誤って2回スクリプトを含めていないことを確認してください。

クリックする前にバインドを解除します。

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

これは、コードにjqueryスクリプトが2回含まれていることを意味します。しかし、これを試してください：

$("#btn").unbind("click").click(function(){

//your code

});

試しました e.stopImmediatePropagation(); これは私にはうまくいくようです。

私の場合、問題を克服するために以下のスクリプトを使用しました

$('#id').off().on('click',function(){
    //...
});

off()にバインドされて#idいるすべてのイベントをバインド解除します。clickイベントのみをバインド解除する場合は、を使用しますoff('click')。

.on（）を呼び出す直前に.off（）を呼び出すだけです。

これにより、すべてのイベントハンドラーが削除されます。

$(element).off().on('click', function() {
// function body
});

登録された「クリック」イベントハンドラのみを削除するには：

$(element).off('click').on('click', function() {
// function body
});

2クリック問題のかなり一般的な解決策は、

e.stopPropagation()

関数の最後（これを使用しfunction(e)ている場合）。これにより、関数の2回目の実行につながる可能性のあるイベントが発生しなくなります。

同じ問題が発生しましたが、このコードを変更してみてください

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

これに：

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

私にとって、このコードは問題を解決しました。ただし、HTMLページに誤ってスクリプトを2回含めないように注意してください。これら2つのことを正しく行っていれば、コードは正しく機能すると思います。ありがとう

これを試してください

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

これは間違いなく、FireFoxの特別なバグです。私はたくさん検索して上記の答えをすべて試し、最終的にSOを介して多くの専門家によってバグとしてそれを得ました。だから、私はようやく変数を宣言することでこのアイデアを思いついた

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

このようにして、最初に関数が以前に呼び出されたかどうかをチェックします。

e.preventDefault();私の機能の最初に追加するとうまくいきました。

これは古い質問ですが、イベントの委任を使用している場合、これが原因でした。

削除後、.delegate-two実行が2回停止しました。これは、両方のデリゲートが同じページに存在する場合に発生すると思います。

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

このコードスニペットには問題はありません。@karimが言ったように、それはあなたのスクリプトの別の部分です

私の場合、Chromeで問題なく動作し、IEが.click()2回呼び出していました。それがあなたの問題だった場合は、.click()イベントを呼び出した後、falseを返すことで修正しました

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

呼び出しはunbind私の問題を解決しました：

$("#btn").unbind("click").click(function() {
    // your code
});

理由はわかりませんが、この問題が発生しました

$(document).on("click", ".my-element", function (e) { });

に変更したとき

$(".my-element").click(function () { });

問題は解決しました。しかし、間違いなく私のコードに問題があります。

複数のアイテムに一致するセレクションにだまされて、それぞれがクリックされました。:first助けた：

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

私もFFでこの問題を抱えていました。しかし、私のタグはタグにバインドされていました<a>。<a>タグはどこにも行きませんでしたが、それでもダブルクリックしました。代わりに<a>タグをタグに交換したところ<span>、ダブルクリックの問題が解消されました。

別の方法は、リンクがどこにも行かない場合にhref属性を完全に削除することです。

$(elem).click(function(){});スクリプトがに設定されたdivにインラインで配置されたため、この問題に直面しましたstyle="display:none;"。

cssの表示がブロックに切り替えられたとき、スクリプトはもう一度イベントリスナーを追加しました。スクリプトを別の.jsファイルに移動し、重複したイベントリスナーが開始されなくなりました。

jqueryでページをロードするときにこのメソッドを使用すると$('#obj').off('click');、クリック関数を設定する前に書き込みを行うので、バブルは発生しません。私のために働く。

私の簡単な答えは、クリックバインドを関数に変換し、要素のonclickからそれを呼び出すことでした。上記のどれもしませんでしたが

イベントが2回または3回、またはそれ以上呼び出す場合は、これが役立つ場合があります。

このようなものを使用してイベントをトリガーする場合…

$('.js-someclass').click();

… .js-someclassページにある要素の数に注意してください。一度だけでなく、すべての要素に対してクリックイベントがトリガーされるためです。

簡単な修正は、最初の要素だけを選択して、クリックを1回だけトリガーすることです。

$('.js-someclass:first').click();

他のいくつかの回答/コメントが示唆しているように、スクリプトの別の場所で「クリック」イベントが同じ要素に再度バインドされていることは確かです。

同様の問題があり、それを確認するためconsole.logに、次のスニペットのように、スクリプトにコマンドを追加しました。

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

ボタンをクリックすると、ブラウザーの開発者コンソールから（下図のように）以下のような画像click()が表示される場合は、イベントが同じボタンに2回バインドされていることを確認できます。

迅速なパッチが必要な場合は、他のコメンテーターが提案しているoff方法（btw unbindはjQuery 3.0以降では非推奨）を使用してイベントをバインド解除してから（再）バインドすることで問題が解決します。

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

残念ながら、これは一時的なパッチにすぎません！上司を幸せにする問題が解決したら、実際にコードをもう少し掘り下げて、「重複したバインディング」の問題を修正する必要があります。

実際のソリューションは、もちろん特定のユースケースに依存します。私の場合、例えば、「文脈」の問題がありました。Ajax呼び出しがドキュメントの特定の部分に適用された結果、関数が呼び出されました。ドキュメント全体を再読み込みすると、実際には「ページ」と「要素」の両方のコンテキストが再読み込みされ、イベントが要素に2回バインドされました。 。

この問題に対する私の解決策は、jQuery one関数を利用することでした。これは、最初の呼び出し後にイベントが自動的にバインド解除されることを除いて、上と同じです。これは私のユースケースには理想的でしたが、繰り返しになりますが、他のユースケースの解決策にはならないかもしれません。

同じ問題があった。これは私のために働いた-

$('selector').once().click(function() {});

これが誰かを助けることを願っています。

私の場合、HTMLは次のようにレイアウトされています。

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

そして私のjQueryはこのようなものでした：

jQuery('.share').toggle();

何も起こっていないように見えたため、混乱しました。問題は、内側のことだった.shareのがtoggle 、外相殺しまう.shareのをtoggle。

要素タイプを変更することでこの問題を解決しました。ボタンの代わりに入力を配置すると、この問題は発生しなくなります。

の挿入：

<button onclick="doSomthing()">click me</button>

と置換する：

<input onclick="doSomthing()" value="click me">