Кнопка, созданная в javascript, не может идентифицировать переменную

Question

Я занят созданием скрипта для API карт google (v3), почти завершил его, но у меня возникла проблема, которую я не могу понять, как решить (могут быть часами безостановочного кодирования: P).

Хорошо, что я пытаюсь сделать, это создать строку html, в которой я также создаю кнопку, которую я хочу выполнить функцией при щелчке, но она не работает, и консоль бросает мне эту ошибку :

Uncaught ReferenceError: marker_gen is not defined

Это код, который вызывает проблему:

(код Ajax, где также создается кнопка) (I ознаменовало 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 
      } 
     }); 
    } 
} 

Если кто-нибудь есть решение для этого, я хотел бы услышать его.

Спасибо заранее, Remy

Answer 1

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 
}); 

Answer 2

Проблема заключается в 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, поэтому, когда маркер удаляется обработчик события не остаются прикрепленными.