在javascript中创建的按钮无法识别变量

Button created in javascript can't identify variable

本文关键字:识别 变量 按钮 javascript 创建      更新时间:2023-09-26

我正忙于为谷歌地图 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&ouml;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&ouml;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&ouml;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,因此当删除标记时,事件处理程序不会保持附加状态。