两次单击按钮以获得正确的console.log输出
两次单击按钮以获得正确的console.log输出
提问于 2015-10-16 12:51:55
我正在慢慢学习&构建一个地图应用程序，它将使用在Google上显示一个搜索词。我现在的问题是，我试图用console.log查看onclick侦听器末尾的搜索词(然后我将尝试将其发送到Geocoding )。
我遇到的问题是，当我在搜索名称中键入字符&单击按钮时，我会得到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文件--但是它在脚本标记中可以工作)：
$(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;
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-16 13:00:45
设置事件侦听器的方式会导致#search上的侦听器在第一次单击#search-submit之前甚至不会被激活。可能，您不打算让一个侦听器创建另一个监听器。
尝试重新组织代码：
document.getElementById("search-submit").addEventListener("click", function() {
...
});
$("#search").submit(function(event) {
});另外，如果您在任何情况下都使用jQuery，为什么不使用它来附加两个侦听器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33170982
复制相关文章
相似问题
腾讯云开发者
