javascript eventlistener autoincrements

-2

私は、複数のイベントリスナーとAJAXを使ってダッシュボードを構築しています.AJAXは、データを前後にPythonバックエンドに転送します。初めて正常に動作します。 2回目はeventlistener関数をクリックすると、2回の応答が得られます... 3回目です...ページをリロードすることでリセットできます。だから私は、AJAXがイベントリスナーのレジスタを再び戻すたびに何らかの形でそれを仮定します。私は検索の束をやったと同様の問題を見つけることができません。ここではJavaScriptコード（私はサーバーに戻って渡しているGoogleマップAPIを含む）です。javascript eventlistener autoincrements

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

    <link href="../static/css/bootstrap.css" rel="stylesheet"> 
    <link href="../static/css/drunken-parrot.css" rel="stylesheet" type="text/css"> 
    <link href="../static/css/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> 
    </head> 
    <div id="leftCol" class="bodyx"> 
      <form role="form"> 
       <placebutton class="btn btn-lg btn-primary btn-block" type="button" id="placebutton">Save</placebutton> 
      </form> 
</div> 
<script type="text/javascript"> 

function sendplace() { 
    $('placebutton').click(function() { 
     pete = ({"firstName":"John"}); 
     console.log("Test"); 
     $.ajax({ 
      url: '/new_place2', 
      data: (pete), 
      contentType: 'application/json;charset=UTF-8', 
      type: 'POST', 
      success: function(response) { 
       console.log(response); 
      }, 
     }); 
    }); 
    }; 
    var placebutton = document.querySelector("placebutton"); 
    placebutton.addEventListener("click", sendplace, false); 
    console.log("addEvent"); 
    </script> 
    </body> 
</html>

私はいくつかの干渉があるかもしれません考えてファイルを絞り込まてきた - 私は何かを見つけることができません - ファイル全体がここにあります。それはまだ2つの問題があります - 1 - 最初のクリックは何もしません、2 - それは毎回1つのループを送ります。うまくいけば、これは見やすいです...もう一度感謝します。

出典

2016-05-23 Jeff Ericson

のJavaのJavaScriptとは何の関係もありません。 – epascarello

ボタンをクリックすると、別のボタンにクリックイベントが追加されます。ボタンを複数回クリックすると、そのボタンに複数のクリックイベントが追加されます。 – epascarello

これを防ぐにはどうすればよいですか？非常に一般的なものでなければならない？ –

私は本当にコンテキストを見ることはできませんが、明らかに、ajaxが完了するたびにリスナーをアタッチしています。これを交換してみてください：

placebutton.addEventListener("click", sendplace, false);

この

placebutton.removeEventListener("click",sendplace); 
placebutton.addEventListener("click", sendplace, false);

マインドとあなたは、これはそれを修正するために非常にきれいな方法ではないこと。 placebutton.addEventListenerが何度も実行されるのはなぜか分かります（あるいは、コードのどこかに追加されているかもしれません）。

出典

2016-05-23 14:54:18

placebutton.addEventListener（...）の横にconsole.count（ 'placebutton click event attach'）を追加すると、何回実行されたかがコンソールに表示されます –

ありがとうございます。私はFireFox Inspectパネルをコンソールに開いていて、自動的に同じイベントをロールアップしているので、明らかに "2"、 "3"と表示されます...別のこと - ボタンはリロード後初めて動作しません2回目のクリックでのみ、2つのイベントが発生します（サーバー側で2つの新しいデータベースエントリが取得されます）。あなたが言及してコンソールログを追加したような 'removeEventListener'コードを追加しました。最初のロード時にのみ実行されます。私はこの機能をもう一度追加し、クリックごとに2つのイベントを維持しています... –

@MikeMcCaughanに感謝します。私は、jQuery関数をaddEventListener関数の中にラップしました。ここで

が、これは（作業）どのように見えるかです：

function sendplace() { 
     var add1 = place; 
     console.log(place); 
     $.ajax({ 
      url: '/new_place2', 
      data: JSON.stringify(place), 
      contentType: 'application/json;charset=UTF-8', 
      type: 'POST', 
      success: function(response) { 
       window.alert("Saved!"); 
       console.log(response); 
      }, 
      error: function(error) { 
       console.log(error); 
      } 
     }); 
    };

と機能を呼び出すコード：

var placebutton = document.querySelector("placebutton"); 
placebutton.addEventListener("click", sendplace, false);

出典

2016-05-23 23:02:40

javascript eventlistener autoincrements

答えて

関連する問題