Click Événement Enregistré avec jQuery Live dans Google Map InfoWindow

J'utilisais la technique décrite ici Click event in Google Map InfoWindow not caught pour ajouter dynamiquement des gestionnaires d'événements click à certains contenus ajoutés à Google Map InfoWindow. Fonctionne bien sauf dans IE.Click Événement Enregistré avec jQuery Live dans Google Map InfoWindow

J'ai du contenu avec des balises d'ancrage normales et ces liens fonctionnent très bien. J'ai une balise d'ancrage avec un gestionnaire de clics jQuery (live) qui lit l'identifiant pour déclencher une autre action et qui ne fait rien dans IE. Chrome/FF etc fonctionnent très bien. J'ai essayé d'utiliser un div et span sans aucun changement au comportement.

Des idées?

Editer: Ceci est avec Google Maps v2 (je sais qu'il est obsolète) et ne fonctionne pas dans IE 7 ou 8. Ne vous embêtez pas avec IE6 sur ce projet.

Édition: Voici un exemple de code qui repose le comportement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

<style type="text/css"> 
#gmap{ height:450px;width:350px; } 
</style> 

<script type="text/javascript"> 
    var gmap; 
    var sampleLatLon = new GLatLng(37.4419, -122.1419); 
    var sampleIcon = new GIcon(G_DEFAULT_ICON); 

    $(document).ready(function() { 

     // Google maps setup 
     $(window).unload(function() { GUnload(); }); 
     var gmap = new GMap2(document.getElementById("gmap")); 
     gmap.setCenter(sampleLatLon, 13); 
     gmap.setUIToDefault(); 

     // Marker and InfoWindow setup 
     var marker = new GMarker(sampleLatLon, { icon: sampleIcon }); 
     var infoWindowMarkup = '<a id="infowindow-1" class="clickeventvialive">click me</a>'; 
     marker.bindInfoWindowHtml(infoWindowMarkup); 
     gmap.addOverlay(marker); 

     $('.clickeventvialive').live('click', function() { 
      alert('Are you Internet Exploder??'); 
     }); 
    }); 
</script> 

</head> 
<body> 
    <div id="gmap"></div> 
</body> 
</html>

Source

2010-08-25 MotoWilliams

Utilisez-vous Google Maps v3 ou v2? Aussi - quelles versions de IE - 6/7/8? – wows

Il existe deux façons de résoudre celle-ci avec jquery l'autre en utilisant skool javascript onclick.

Dans la méthode jQuery liant l'événement Une fois la fenêtre d'information est affichée et l'élément créé semble résoudre le problème:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"> 
     </script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> 
     </script> 
     <style type="text/css"> 
      #gmap { 
       height: 450px; 
       width: 350px; 
      } 


     </style> 
     <script type="text/javascript"> 
      var gmap; 
      var sampleLatLon = new GLatLng(37.4419, -122.1419); 
      var sampleIcon = new GIcon(G_DEFAULT_ICON); 

      $(document).ready(function(){ 

       // Google maps setup 
       $(window).unload(function(){ 
        GUnload(); 
       }); 
       var gmap = new GMap2(document.getElementById("gmap")); 
       gmap.setCenter(sampleLatLon, 13); 
       gmap.setUIToDefault(); 

       // Marker and InfoWindow setup 
       var marker = new GMarker(sampleLatLon, { 
        icon: sampleIcon 
       }); 

       //marker.bindInfoWindowHtml(infoWindowMarkup); 

       GEvent.addListener(marker, "click", function(){ 
        var infoWindowMarkup = '<div class="container"><a id="infowindow-1" class="clickeventvialive">click me</a></div>'; 
        gmap.openInfoWindowHtml(sampleLatLon, infoWindowMarkup, { 
         "onOpenFn": function(){ 
         $(".clickeventvialive").bind("click", function(){alert("hello")}); 
         } 
        }); 

       }); 



       gmap.addOverlay(marker); 

      }); 
     </script> 
    </head> 
    <body> 
     <div id="gmap"> 
     </div> 
    </body> 
</html>

ou l'ancienne méthode skool où vous pouvez simplement ajouter gestionnaire onclick à votre lien HTML:

var infoWindowMarkup = '<a id="infowindow-1" onclick=alert("Old Skool") class="clickeventvialive">click me</a>';

Source

2010-10-17 22:59:49 Michal

Merci pour la suggestion - J'ai fini par aller le javascript intrusive et en alignant l'onclick même dans le balisage. Je perds 50 points SO représentant et des tonnes de dev cred, mais il était tard un vendredi et j'avais besoin d'une solution. Plus tard, je vais regarder dans le GEvent pour me racheter (si quelque chose, juste pour moi-même). – MotoWilliams

Click Événement Enregistré avec jQuery Live dans Google Map InfoWindow

Répondre

Questions connexes