web-dev-qa-db-ja.com

ボタンonclick関数が2回起動する

イベントハンドラを使用してjavascript関数を呼び出すボタンがあります。何らかの理由で、イベントハンドラーが2回呼び出されています。

ここに私のボタンがあります（私はphpオブジェクトを使用してコードを生成しているため、多くの空のタグがあります）。

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

これが私のイベントハンドラです。

$('.addToCartButton').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

ここで、アラートを2回受け取ります。

ボタンのonclickプロパティで関数addToCartを呼び出そうとしましたが、そのようにしようとすると、このエラーが発生します。

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

Event.preventDefault（）とevent.stopPropagation（）も試しましたが、どちらも動作しませんでした。

これが起こっている理由、または2回実行を停止するためにできること、またはonclick = ""からjavascript関数を呼び出すとエラーが発生する理由はありますか？

javascriptevent-handlinghtmlbutton
40
Jason247

たぶん、あなたは同じボタンにイベントを2回添付しています。次のような以前に設定されたクリックイベントのバインドを解除することができます。

$('.addToCartButton').unbind('click').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

これは、添付されているすべてのイベント（マウスオーバー、マウスアウト、クリックなど）で機能します。

91
Mike Vranckx

誤ってmy_scripts.jsとmy_scripts.min.jsの両方をインクルードしたため、イベントが2回発生しました。必ず1つだけ含めるようにしてください。

12
user1491819

セレクターからイベントのバインドを解除し、DOMの要素に追加した後、特定のセレクターでイベントを再度トリガーします。$（ "selector_name"）。unbind（ "event"）; //セレクターでのこの呼び出しイベントの後。

例えば：

$( "#button" ).unbind( "click" );

$("#button").click(function(event) {
console.log("button click again);
});
7
user2801665

他の誰かが同じ問題を抱えている場合の記録のために、私は同じ問題を抱えていました、根本的な原因は同じIDを持つ3つのボタンがあり、1つをクリックした後、他の2つもOnClickイベントを発生させた...

6
Gabriel G

私にとって、イベントはマップされたコンポーネントにバインドされていないことがわかりました。関連する回答は なぜレンダリングでonClickが呼び出されるのですか？-React.js ですが、いくつかの洞察を提供するために、以下の回答の一部をコピーしました（これが役立つことを願っています！）：

1。.bindを使用

activatePlaylist.bind(this, playlist.playlist_id)

2。矢印関数を使用

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3。またはactivatePlaylistから関数を返す

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}
1
Kevin Danikowski

あなたはおそらくイベントにパスして追加したいです

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
});

OR

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
  return false;
});
0
bosspj