javascript eventlistener autoincrements

-2

Ich baue ein Dashboard mit mehreren EventListenern und AJAX, die Daten hin und her zu einem Python-Backend überträgt. Es funktioniert gut beim ersten Mal. Das zweite Mal, wenn ich auf die Funktion eventlistener klicke, bekomme ich zwei Antworten ... das dritte Mal 3 ... Ich kann es zurücksetzen, indem ich die Seite neu lade. Ich gehe also davon aus, dass sich der Eventlistener bei jedem AJAX-Event irgendwie neu registriert. Ich habe einige Suchen durchgeführt und kann kein ähnliches Problem finden. Hier ist der JavaScript-Code (einschließlich der Google Map API, die ich zurück an den Server übergebe).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>

Ich habe die Datei schnitzte denken könnte es einige Störungen sein - ich kann nichts finden - die gesamte Datei hier. Es hat immer noch die zwei Probleme - 1 - erster Klick macht nichts, und 2 - es sendet jedes Mal eine weitere Schleife. Hoffentlich ist das einfacher zu sehen ... Danke nochmal.

Quelle

2016-05-23 Jeff Ericson

Java hat nichts mit JavaScript zu tun. – epascarello

Wenn Sie also auf die Schaltfläche klicken, fügen Sie ein Klickereignis zu einer anderen Schaltfläche hinzu. Wenn Sie mehrmals auf die Schaltfläche klicken, fügen Sie dieser Schaltfläche mehrere Klickereignisse hinzu. – epascarello

Wie verhindere ich das? Muss eine sehr häufige Sache sein? –

Ich kann den Kontext nicht wirklich sehen, aber klar, Sie verbinden den Hörer jedes Mal, wenn Ajax fertig ist. Versuchen Sie, diese zu ersetzen:

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

mit diesem

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

Wohlgemerkt, dass dies nicht eine sehr saubere Art und Weise ist es zu beheben. Sie sollten wirklich herausfinden, warum placebutton.addEventListener viele Male ausgeführt wird (oder vielleicht wird es woanders im Code hinzugefügt?).

Quelle

2016-05-23 14:54:18

Versuchen Sie, neben placebutton.addEventListener (...) ein console.count ('placebutton click event attach') hinzuzufügen und Sie werden in der Konsole sehen, wie oft es ausgeführt wird –

Danke. Ich habe das FireFox Inspect Panel auf der Konsole geöffnet und es rollt automatisch die identischen Events hoch, also sagt es eindeutig "2" und dann "3" ... eine andere Sache - der Button funktioniert beim ersten Mal nicht nach dem Reload , nur auf den zweiten Klick, gibt dann 2 Ereignisse (ich bekomme 2 neue identische Datenbankeinträge auf der Serverseite), dann fügt jeder nachfolgende Klick einen anderen hinzu. Ich habe den 'removeEventListener'-Code wie oben erwähnt hinzugefügt und ein Konsolenprotokoll hinzugefügt - es wird nur beim ersten Laden ausgeführt. Ich habe es wieder in der Funktion hinzugefügt und es hält mich auf 2 Ereignisse für jeden Klick ... –

Dank @MikeMcCaughan, um es klar zu machen - ich hatte eine jQuery-Funktion innerhalb einer addEventListener-Funktion verpackt.

Hier ist, wie folgt aussieht (in Betrieb):

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); 
      } 
     }); 
    };

Und der Code, der die Funktion aufruft:

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

Quelle

2016-05-23 23:02:40

javascript eventlistener autoincrements

Antwort

Verwandte Themen