javascript eventlistener autoincrements

-2

我正在用多个eventlisteners和AJAX构建一个仪表板，它将数据来回传输到Python后端。它第一次正常工作。第二次单击eventlistener函数，我得到两个响应...第三次3 ...我可以通过重新加载页面来重置它。所以我假设每次AJAX都会再次返回eventlistener寄存器。我做了一堆搜索，找不到类似的问题。这里是javascript代码（包括我传回服务器的google map 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>

我已经削减了文件，认为可能会有一些干扰 - 我找不到任何东西 - 整个文件都在这里。它仍然有两个问题 - 1 - 第一次点击不做任何事情，2 - 每次发送一个循环。希望这更容易看...再次感谢。

来源

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个新的相同的数据库条目），然后每个后续点击添加另一个。我像你提到的那样添加了'removeEventListener'代码并添加了一个控制台日志 - 它只在第一次加载时运行。我在函数中再次添加了它，并且每次点击都会使我保持2个事件... –

感谢@MikeMcCaughan的说明 - 我有一个包含在addEventListener函数内的jQuery函数。

下面是这个样子（工作）：

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

回答

相关问题