兩次點擊按鈕以獲取正確的console.log輸出

我在慢慢學習&構建地圖應用程序，該應用程序將使用Google地理編碼API在Google地圖上顯示搜索字詞。我的問題是，我試圖通過console.log（我將嘗試發送到Google地址解析API）來查看onclick監聽器末尾的搜索字詞。兩次點擊按鈕以獲取正確的console.log輸出

我遇到的問題是，當我在搜索名稱中鍵入字符&單擊該按鈕時，我得到console.log輸出，但是一開始單擊它爲空或上一個術語，如果我單擊一旦。當我再次點擊時，它會顯示正確的輸出。

據推測，onclick監聽器以某種方式使用緩存的術語？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
     #map-canvas { 
     width: 100%; 
     height: 600px; 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    </head> 

    <body> 

    <form id="search"> 

     <p><input id="search-name" type="text" placeholder="Type Region Here"></p> 
     <p><input id="search-submit" type="submit" value="Search For Region"></p> 

    </form> 

    <p id="demo"></p> 

    <div id="map-canvas"></div> 

    <script type="text/javascript"> 

     // Global Variables 
     var name; 

     //map options 

     var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(37.09024, -100.712891), 
     panControl: false, 
     panControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_LEFT 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.RIGHT_CENTER 
     }, 
     scaleControl: false 

     }; 

     //Fire up Google maps and place inside the map-canvas div 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     // Button Click  
     document.getElementById("search-submit").addEventListener("click", function(){ 

     // Search Submit 
     $(function() { 

     $("#search").submit(function(event){ 
      event.preventDefault(); 
      name = $("#search-name").val(); 
      return name; 
     }); 

     }); 

     // console.log("Search term after search submit is: "+name); 
     console.log("Search term at end is: "+name); 

     }); 

    </script> 
    </body> 
</html>

編輯：

有興趣的人知道我是如何解決它，我做了以下（作爲一個單獨的.js文件 - 但它會在script標籤內工作）：

$(document).ready(function(){ 

     //Map Options  

     var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(37.09024, -100.712891), 
     panControl: false, 
     panControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_LEFT 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.RIGHT_CENTER 
     }, 
     scaleControl: false 

     }; 

     //Map Creation 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     // Search Submit 
     $("#search").submit(function(event){ 
      event.preventDefault("", function(){ 
        // 
        }); 

      name = $("#search-name").val(); 
      console.log("Search term at submit is: "+name); 
      return name; 
     }); 

});

來源

2015-10-16 Mr T

'.submit'激發異步。 –

您設置事件偵聽器的方式會導致在您第一次單擊#search-submit之前，#search上的偵聽器未被激活的情況。也許，你不打算讓一個聽衆創造另一個。

嘗試重新組織代碼：

document.getElementById("search-submit").addEventListener("click", function() { 
    ... 
}); 

$("#search").submit(function(event) { 

});

另外，如果你在任何情況下使用jQuery，爲什麼不使用它用於連接兩個聽衆。

來源

2015-10-16 13:00:45 Thernys

非常感謝。我一直在進一步閱讀，因爲我一直在努力獲得上述邏輯（儘管我大致瞭解你在說什麼）。我比JavaScript更理解查詢，所以我正在用jquery重寫它。 –

我已經變得有點下雪了，看不見樹林裏的木頭！ –

兩次點擊按鈕以獲取正確的console.log輸出

回答

相關問題