web-dev-qa-db-ja.com

jQuery Button.click（）イベントが2回トリガーされます

このコードには次の問題があります。

<button id="delete">Remove items</button>

$("#delete").button({
     icons: {
             primary: 'ui-icon-trash'
     }
}).click(function() {
     alert("Clicked");
});

このボタンをクリックすると、アラートが2回表示されます。これは、この特定のボタンだけでなく、私が作成するすべてのボタンにも適用されます。

私は何を間違えていますか？

jqueryfunctionbuttonclick
73
user276289

現在のコードは動作します。ここで試してみてください： http://jsfiddle.net/s4UyH/

別の何かをトリガーする別の例があります .click() 、その要素でclickイベントをトリガーするalsoである他のハンドラーをチェックしてください.

63
Nick Craver

その場合、次のことができます

$('selected').unbind('click').bind('click', function (e) {
  do_something();
});

最初にイベントが2回発生し、ページが更新されると4回発生しました。私がグーグル検索で見つけたのは、多くの実りのない時間の後だった。

また、JQueryUIアコーディオンウィジェットの使用を開始するまで、コードは最初は機能していたと言わなければなりません。

115
Simeon Abolarinwa

私も経験した奇妙な行動。だから、私にとっては「偽りを返す」トリックをしました。

        $( '#selector' ).on( 'click', function() {
            //code
            return false;
        });
32
Sergey Onishchenko

使用する場合

$( document ).ready({ })

または

$(function() { });

クリック機能は、使用される回数だけトリガーされます。

16
nywooz

これを試すことができます。

    $('#id').off().on('click', function() {
        // function body
    });
    $('.class').off().on('click', function() {
        // function body
    });
10
reza.cse08

私は同じ問題を抱えてすべてを試しましたが、うまくいきませんでした。だから私は次のトリックを使用しました：

function do_stuff(e)
{
    if(e){ alert(e); }
}
$("#delete").click(function() {
    do_stuff("Clicked");
});

コードを実行するよりもそのパラメーターがnullでないかどうかを確認します。したがって、関数が2回目にトリガーされると、必要なものが表示されます。

3
Vlad Isoc

これは、inputとlabelの両方を持つことでトリガーすることもできますinsideクリックリスナーを持つ要素。

labelをクリックすると、クリックイベントがトリガーされ、同様にinputに対するlabelの別のクリックイベントがトリガーされます。両方のイベントが要素にバブルします。

おしゃれなCSS専用トグルのこのペンを参照してください： https://codepen.io/stepanh/pen/WaYzzO

注：これはnot jQuery固有で、ネイティブリスナーはペンで表示されるのと同様に2倍にトリガーされます。

2
Stepan
$("#id").off().on("click", function() {

});

私のために働いた。

$("#id").off().on("click", function() {

});
2
Shahid Hussain Abbasi

ニックが言おうとしていることと同じように、外部から何かがイベントを2回トリガーしています。これを解決するには、event.stopPropagation（）を使用して、親要素がバブリングするのを防ぐ必要があります。

$('button').click(function(event) {
    event.stopPropagation();
});

これがお役に立てば幸いです。

1
Riel Stephen Abrenio

これは、次の理由で発生する可能性があります。

  1. 同じHTMLファイルにスクリプトが複数回含まれているのいずれか
  2. ）エレメントのonclick属性を使用して、イベントリスナーを既に追加しています
  3. extendsでDjangoのようなtemplate inheritanceを使用する場合、おそらくが複数のファイルにスクリプトをインクルードしているincludeまたはextendによって結合されます
  4. イベントは、親要素までバブルされます.
  5. Djangoテンプレートを使用している場合、_blockを別のの内側に間違って配置しています。

そのため、それらを見つけて、重複するインポートを削除する必要があります。それが最善です。

別の解決策は、次のようなスクリプトで最初にすべてのclickイベントリスナーを削除することです。

$("#myId").off().on("click", function(event) {
event.stopPropagation();
});

イベントがバブルされていないことが確実な場合は、event.stopPropagation();をスキップできます。

1
Mohammed Shareef C

私の場合、このように変更コマンドを使用していました

$(document).on('change', '.select-brand', function () {...my codes...});

そして、私は道を変えました

$（ '。select-brand'）。on（ 'change'、function（）{... my codes ...}）;

そしてそれは私の問題を解決しました。

1
sh6210

複数回発生する関数でelement.clickをバインドするとキューに入れられるため、次回クリックすると、バインド関数が実行された回数だけトリガーされます。おそらく新人の間違いは私の終わりですが、それが役立つことを願っています。 TL、DR：一度だけ発生するセットアップ機能のすべてのクリックをバインドしてください。

1
igarciaoliver