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

回答

相關問題