Dostęp do elementów zawartych w POPUPIE markera

Communities Polska (Poland)
1

Witam, jak uzyskać dostęp do elementów formularza ale zawartego w popupie za pomocą jquery.
Fragment kodu:


L.marker([x,y], {icon: mark_1}).addTo(map).bindPopup("<input class='dodruku' type='checkbox'  />");

Próbuję się do tego inputa dobrać tak:


$("input.dodruku").click(function(){
alert('cośtam');
}

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ć.
Markerów je na mapie wiele.
Jest jakiś sposób na odwoływanie się do nich z jquery ?

2

Może prościej…
Gotowy plik do odpalenia w przeglądarce.
Jak zrobić żeby z wygenerować zdarzenie jquery po kliku w link w popupie żeby działał tak jak ten pod mapą.


<!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>
3

Nie możesz użyć jakiegoś eventa do aktualizacji?

Np.

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

Edit:
Spróbuj tego:

$('#map').on('click', '.A1', function() {
	alert('halo');
});
4

Działa w takiej postaci:


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

Dzięki

5

Dołączam 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.


    <!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>

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) ?

6

0_o a o tablicach słyszałeś?

7

Nie wiem czy się zrozumieliśmy, chodzi mi o to że jak marker dostanie nazwę sklejoną ze stringa i zmiennej to ta nazwa póxniej nie jest widoczna, nie można się doń póxniej odwołać

8

A dlaczego chcesz się odwoływać? Jaki to ma mieć cel?


var marker = new Array();
var i = 0;for (i = 0; i < 3; i++){
    marker[i]= L.marker([49+i, 18.0+i]).addTo(map);
    }
     
    popup = L.popup({closeButton: false,keepInView: false,minWidth:150,offset:(40, 400)}).setContent('coontenr');
     
    marker[0].bindPopup(popup);
    marker[1].bindPopup(popup);
    marker[2].bindPopup(popup);
9

Dzięki, działa !
Zamiast tablic to zmienne sklejałem ze stringów. A chcę się odwoływać bo np. po kliku w marker ma się pobrać z bazy pewna infirmacja i wyswietlić w popupie, ma się zmienić ikona itp. Nie zamieszczałem oryginalnego kodu bo już dawno go przestałem rozumieć :wink: