在javascript中创建的按钮无法识别变量
Button created in javascript can't identify variable
我正忙于为谷歌地图 API (v3) 创建脚本,几乎完成了它,但我遇到了一个我不知道如何解决的问题(可能是几个小时不间断编码:P)。
好的,所以我要做的是创建一个 html 字符串,我也在其中创建一个按钮,我想在单击时执行一个函数,但它不起作用,控制台给我抛出此错误:
未捕获的引用错误: 未定义marker_gen
这是导致问题的代码:
(创建按钮的 ajax 代码)(我用"->"标记了 html 字符串)
$.get("includes/require/gen.php", function (data) {
$(data).find("marker").each(function () {
//Get user input values for the marker from the form
var name = $(this).attr('name');
var info = $(this).attr('address'); //description
var type = $(this).attr('type');
var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
//call create_marker() function for xml loaded maker
//create_marker(point, name, address, false, false, false);
var marker_gen = new google.maps.Marker({
position: point,
map: map,
icon: "img/icons/green_marker.png"
})
google.maps.event.addDomListener(marker_gen,"click",function(event){
-> contentString = '<div id="div_info"><h2>'+ name+'</h2> <p><b>Type: </b>'+type+'<br/><b>Coördinaten: </b>'+point+'</p><p><b>Omschrijving:</b><br/>'+info+'<br/><br/></span><button name="remove-marker" class="remove-marker" onclick="remove_marker(marker_gen)" title="Remove Marker">Remove Marker</button></div>';
IW.content = contentString;
IW.open(map,marker_gen);
});
});
});
这是remove_marker函数(尽管怀疑是否需要)
function remove_marker(Marker)
{
/* determine whether marker is draggable
new markers are draggable and saved markers are fixed */
if(Marker.getDraggable())
{
Marker.setMap(null); //just remove new marker
//marker = null;
}
else
{
//Remove saved marker from DB and map using jQuery Ajax
var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
var myData = {del : 'true', latlang : mLatLang}; //post variables
$.ajax({
type: "POST",
url: "includes/require/gen.php",
data: myData,
success:function(data){
Marker.setMap(null);
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError); //throw any errors
}
});
}
}
如果有人对此有解决方案,我很想听听。
提前感谢,雷米
contentString = '<div id="div_info"><h2>'+ name+'</h2> <p><b>Type: </b>'+type+'<br/><b>Coördinaten: </b>'+point+'</p><p><b>Omschrijving:</b><br/>'+info+'<br/><br/></span><button name="remove-marker" class="remove-marker" data-marker="' + marker_gen + '" title="Remove Marker">Remove Marker</button></div>';
不要使用 onclick
.. 使用 on()
进行事件委派,因为您是动态创建此按钮的。此外,在创建按钮时,请使用data-marker="' + marker_gen + '"
作为属性,如上所示。
$('document').on('click','.remove-marker', function() {
var Marker = $(this).data('marker');
//Handle everything else here
});
问题是contentString
标记不会与您的脚本位于同一上下文中,因此它永远无法访问marker_gen
。
您需要使用事件委派,如@Krishna所述:
google.maps.event.addDomListener(marker_gen,"click",function(event){
var contentString = '<div id="div_info"><h2>'+ name+'</h2> <p><b>Type: </b>'+type+'<br/><b>Coördinaten: </b>'+point+'</p><p><b>Omschrijving:</b><br/>'+info+'<br/><br/></span><button name="remove-marker" class="remove-marker" onclick="remove_marker(marker_gen)" title="Remove Marker">Remove Marker</button></div>';
IW.content = contentString;
IW.open(map,marker_gen);
$('#div_info button').one('click', function() {
// remove marker code or call here
});
});
请注意,我使用的是$.one
而不是$.on
,因此当删除标记时,事件处理程序不会保持附加状态。
相关文章:
- 函数无法识别初始化的变量
- angular/javascript无法识别函数内部的全局变量
- 在javascript中未将变量识别为变量
- 在JSP函数中写入的变量无法识别
- ng使用一个不识别临时变量形式ng repeat的函数绑定html
- javascript函数无法识别传递给它的角度变量
- 无法识别一个 js 文件中的变量
- JavaScript 如何重新识别事件对象变量
- 为多个变量定义相同的类型,在Webstorm中识别
- 在javascript中创建的按钮无法识别变量
- 全局范围内的变量在 javascript 中无法识别
- 下划线 _.模板无法识别变量
- (Javascript)脚本获胜't只计算一次,可能没有识别变量
- 浏览器不能识别变量
- . js.ERB不能识别变量
- NodeJS函数不识别变量
- JavaScript IF语句不能识别变量
- 如何识别变量I'我想用JavaScript进行比较
- JavaScript upTime函数-不识别变量的ID
- 如何识别变量JSON.stringify