Cliquez sur le lien à l'intérieur du Dépliant de message et de le faire en Javascript
J'ai une notice de la carte et en cours d'exécution. Il se superpose à une série de polygones (via GeoJSON) sur la carte et s'attache fenêtres pop-up pour chaque polygone. Chacun des popups afficher des informations à propos de ce polygone.
J'aimerais avoir à l'intérieur de la popup un lien qui, lorsqu'il est cliqué, exécute une fonction javascript qui tire plus petits polygones via AJAX et les affiche.
Je ne peux pas obtenir le script pour attraper un clic sur le lien via la normale, jQuery/Javascript, cliquez sur événements. Voici ce que je veux dire par rapport à la normale (ce qui suit ne fonctionne pas):
$('a .smallPolygonLink').click(function(e){
console.log("One of the many Small Polygon Links was clicked");
});
La bindPopup partie est comme suit. Il fonctionne sur chaque polygone lorsqu'elle est faite et il s'affiche correctement sur cliquant sur un polygone. Il montre le lien, il suffit de ne pas exécuter le code ci-dessus sur cliquez sur.
var popupContent = "Basic Information..." + '<a class="smallPolygonLink" href="#">Click here to see the smaller polygons</a>';
layer.bindPopup(popupContent);
Voici un JSFiddle illustrant l'exemple, bien que dans une forme plus simple. http://jsfiddle.net/2XfVc/4/
Vous devez vous connecter pour publier un commentaire.
Le lien de l'élément à l'intérieur de la popup est généré dynamiquement à partir de votre balisage chaque fois que le popup est ouvert. Cela signifie que le lien n'existe pas lorsque vous essayez de lier le gestionnaire pour qu'il.
L'idéal ici serait d'utiliser
on
de déléguer la gestion des événements de la fenêtre contextuelle élément ou un ancêtre de il. Malheureusement, le popup empêche la propagation de l'évènement, c'est pourquoi déléguer la gestion des événements de tous les éléments statiques en dehors de la popup ne fonctionne pas.Ce que vous pouvez faire est de preconstruct le lien, joindre le gestionnaire, et puis la passer à la
bindPopup
méthode.Voici une démonstration: http://jsfiddle.net/2XfVc/7/
En général, d'insérer toute sorte de complexe de balisage avec plusieurs gestionnaires d'événements, utilisez ce qui suit approche:
Voici une démo: http://jsfiddle.net/8Lnt4/
Voir cette question Git pour en savoir plus sur la propagation de l'évènement dans la fiche de popups.
[0]
partie obtient tout simplement le nœud DOM à partir de l'jQuery collection, depuis dépliant accepte la norme nœuds DOM, mais pas jQuery collections..html()
au lieu de.text()
de sorte que certains de la mise en forme html se présentent, mais sinon c'était parfait. Merci.Tandis que le Popup contenu wrapper empêche la propagation de l'évènement, les événements dans le popup intérieure de Balisage propager l'amende juste. Vous pouvez ajouter des événements pour afficher les éléments lorsqu'ils sont affichés sur la carte (et sont devenus partie intégrante de la DOM). La montre juste pour le dépliant de l'événement
popupopen
.http://jsfiddle.net/tJGQ7/2/
Cela fonctionne comme un charme pour moi. Si votre popup ne dispose pas d'un
'a .smallPolygonLink'
le code ci-dessus ne fait rien.Ce code s'exécute à chaque démarrage d'une popup. Cependant, vous n'avez pas à vous inquiéter qu'il attache plus d'un gestionnaire à un élément, depuis quand la popup se ferme, les nœuds DOM sont jetés.
Il est beaucoup plus générale, pour ce faire. Cependant, cela implique
eval()
. Utiliser à vos propres risques. Mais quand AJAXloading partielle, des pages qui contiennent JS vous exécutez les mêmes risques, donc, pour votre édification, je présente "l'exécution de JS à l'intérieur de votre dépliant popups":démo: http://jsfiddle.net/tJGQ7/4/
Maintenant, vous pouvez écrire:
on
ne fonctionnerait pas. La deuxième meilleure approche est de se lier à toutes et tous de la gestion des événements de la fonctionnalité exactement après pour un élément de conteneur et de l'insertion.C'est ce que j'ai trouver sur le mapbox site officiel: Cliquez sur créer un événement dans un popup avec marqueur Mapbox.js et jQuery. Le commentaire explique pourquoi nous disons
$('#map')
au lieu de$('#mybutton')
.Je suis tombé sur ce problème, essayé la solution ci-dessus. Mais cela n'a pas fonctionné pour moi. Trouvé ce joli la base de jquery solution.
Vous pouvez vérifier l'intérieur des propriétés de
popup
objet, y compris_wrapper
etc.Vous pouvez utiliser jQuery pour sélectionner le
canvas
élément, mais vous auriez à utiliser ses propres méthodes au sein de la toile. Un début décent serait https://developer.mozilla.org/en/canvas_tutorial .mapbox bibliothèque JavaScript est un événement:
https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/