web-dev-qa-db-ja.com

クラスセレクターを使用するとjqueryクリックイベントが複数回発生する

ここに私のhtmlです

<li><div class="myLink" id=1>A<div>
<li><div class="myLink" id=2>b<div>
<li><div class="myLink" id=3>c<div>
<li><div class="myLink" id=4>d<div>
<li><div class="myLink" id=5>d<div>
<li><div class="myLink" id=6>e<div>
<li><div class="myLink" id=7>d<div>
<li><div class="myLink" id=8>g<div>

私はこのコードでjqueryイベントバインドを作成しました：

    jQuery(".myLink").click(function(event) {

         var myId = this.id;

         location.href = '/x/y?myId=' + myID;
   });

リンク（liアイテム）の1つをクリックすると、これで1つのクリックイベントが発生するだろうと思ったので、this.idを呼び出すと、クリックしたアイテムのIDが取得されます。

しかし、代わりに次のようになります。

   jQuery(".myLink").click(function(event) {

1つのリンクをクリックしただけでも何度も何度も発砲します。私はそれらにデバッガ文を置き、firebugを使用して、これが何度も呼び出されるのを見ました。

どんなアイデアが起こっているのですか？

jqueryhtmlcss-selectorsclick
27
leora

あなたがあなたの<li>タグ、問題を修正します。私はそれをテストしました、そしてそれはそれを修正します。する必要があります

<li> ... </li>
<li> ... </li>

ない

<li>
<li>
18
Erik

同様の問題があり、解決策はクリックイベントを宣言する前にクリックイベントをバインド解除することでした。あまり意味がありませんが、複数のイベントが単一のHTML要素にどのように付加されるのか私にはわかりませんでした。 （そして私のHTMLは有効に見えました;））

$（ '。remove_lkc'）。unbind（ 'click'）。click（function（）{..........

69
user512568

私の場合、同じパーシャルをレンダリングする複数のタブがあり、各パーシャルにはクリックイベントを3回バインドする$（document）.ready（）呼び出しがありました。

14
Pratik Khadloya

これらの2行を追加することで解決しました。

event.stopPropagation();
event.preventDefault();

出典： http://code.google.com/intl/en/mobile/articles/fast_buttons.html

9
Johan B

id属性の値を引用符で囲んでみてください。 id=1を置くだけで奇妙なことが起こります。

また、それが複数回発砲していることをどうやって知っていますか？この行を関数の最上部に置き、firebugログを見て何が起こっているかを確認します。

console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr('id') );

編集：

ええ、他の人が指摘したように...あなたのマークアップも有効であることを確認してください：P

6
rfunduk

私の問題は、<div>sを作成したときにループにイベントバインディングがあったため、イベント内の各アイテムに繰り返しイベントを追加していたことです。再確認する必要があります。

6
chrishawn

私の場合、javascriptはajaxリクエストとともにレンダリングする必要があります。

$(document).ready(function(){
    $(document).on('click','.className',function(){alert('hello..')})
});

イベントが複数回発生した.. 。off（）を使用して、以前のすべてのイベントハンドラーを削除した。 （.on（）で使用されているものと同じ署名を使用する）

$(document).ready(function(){
    $(document).off('click','.className');
    $(document).on('click','.className',function(){alert('hello..')});
});

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

4
chris

投稿されたHTMLからは、myLink DIVがネストされているように見え、各DIVがクリックを取得するときにイベントが複数回発生します。前述のように、タグの形式が正しいことを確認してください。各行の終わりにあるDIVタグは終了タグであるはずですか？

1
leepowers

Jsスクリプトを複数回含めないようにしてください。サーバーサイトでフレームワークを使用している場合は、レイアウトとテンプレートに同じスクリプトが含まれていないことを確認してください。

1
Snake_Tn

私はそれが複数回発火しているほとんどの場合、それをループに入れたり、その複数回をバインドしている状態でそれを複数回発火させたりする方法があると思います。コードをチェックして、イベントを複数回バインドしていないことを確認してください。

in my case i have below event
--------------------------------------------------------------------
    bindSelectYesNoHeathCare = () =>
    {
        $(document).on('click', '.healthCareTypeClass', function (event)
    }

   showHideDivs = (id: number,
                    changeNavigationMenu: boolean = true,
                    loadDataFromServer:boolean = false,
                    validateHealthCareScreens = false) =>
    {
       ChildMgr.bindSelectYesNoHeathCare(); 
    }

私はそれを別のイベントに対してバインドしていましたが、クリックするたびに再びバインドされ、何度も起動しました。

0
A SHAHZAD