Forum PHP.pl > Problem z obsługą zdarzenia w popupie mapy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z obsługą zdarzenia w popupie mapy

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

m72

13.06.2014, 22:54:09

Jak zrobić żeby z wygenerować zdarzenie jquery po kliku w link w popupie (pojawia sie po kliku w marker) żeby działał tak jak ten pod mapą.
Problem chyba w tym ze strona po załadowaniu nie ma w swoim drzewie DOM zbindowanego popupa który się pojawia dopiero po kliku więc nie ma się do czego odwoływać.
Gotowy plik do odpalenia w przeglądarce.

[HTML] pobierz, plaintext 
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    </head>
    <body>
    <div id="map" style="width:500px;height:500px;">
          <script>
          var map = L.map('map').setView([54.6154, 18.8141], 7);
                L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Š <a href="http://cloudmade.com">CloudMade</a>'
                }).addTo(map);
 
          L.marker([54.6154,18.8141]).addTo(map).bindPopup("<a href='#' class='A1'>link</a>");
          </script>
    </div>
    <a href='#' class='A1'>link</a>
 
    <script>
    $( '.A1' ).click(function() {
    alert('halo');
    });
    </script>
    </body>
    </html>
 
[HTML] pobierz, plaintext

Turson

13.06.2014, 23:20:56

Kod

$(document).on('click','.A1',function() {
alert('halo');
});

m72

16.06.2014, 13:11:22

Dzięki, działa !

Dołącz jeszcze jeden problem to tego wątku.
Chciałem dynamicznie dodawać nazwy markerów w pętli, po to żeby się móc później do nich odwoływać ale coś chyba jest nie tak.

[HTML] pobierz, plaintext 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<body>
<div id="map" style="width:500px;height:500px;">
<script>
var map = L.map('map').setView([50, 19], 7);
		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Š <a href="http://cloudmade.com">CloudMade</a>'
		}).addTo(map);
 
 
 
var i = 0;for (i = 0; i < 3; i++){
									marker='marker'+i;
									console.log(marker);
									marker= L.marker([49+i, 18.0+i]).addTo(map);
								} 		
 
popup = L.popup({closeButton: false,keepInView: false,minWidth:150,offset:(40, 400)}).setContent('coontenr');
 
marker0.bindPopup(popup);
marker1.bindPopup(popup);
marker2.bindPopup(popup);
 
 
 
</script>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Konsola wyrzuca:

ReferenceError: marker0 is not defined popup.html:28
"marker0" popup.html:22
"marker1" popup.html:22
"marker2"

Podpowiedzcie jak można dynamicznie nadawać nazwy markerom (w pętli) ?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.