Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z obsługą zdarzenia w popupie mapy
m72
post 13.06.2014, 22:54:09
Post #1





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 25.12.2012

Ostrzeżenie: (0%)
-----

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 
  1.     <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6.     <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  7.     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  8.     </head>
  9.     <body>
  10.     <div id="map" style="width:500px;height:500px;">
  11.           <script>
  12.           var map = L.map('map').setView([54.6154, 18.8141], 7);
  13.                 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  14.                 maxZoom: 18,
  15.                 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>'
  16.                 }).addTo(map);
  17.  
  18.           L.marker([54.6154,18.8141]).addTo(map).bindPopup("<a href='#' class='A1'>link</a>");
  19.           </script>
  20.     </div>
  21.     <a href='#' class='A1'>link</a>
  22.  
  23.     <script>
  24.     $( '.A1' ).click(function() {
  25.     alert('halo');
  26.     });
  27.     </script>
  28.     </body>
  29.     </html>
  30.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Turson
post 13.06.2014, 23:20:56
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

Kod
$(document).on('click','.A1',function() {
    alert('halo');
    });
Go to the top of the page
+Quote Post
m72
post 16.06.2014, 13:11:22
Post #3





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 25.12.2012

Ostrzeżenie: (0%)
-----

Dzięki, działa ! smile.gif

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 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8"> 
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6. <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  7. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  8. </head>
  9. <body>
  10. <div id="map" style="width:500px;height:500px;">
  11. <script>
  12. var map = L.map('map').setView([50, 19], 7);
  13. 		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  14. 		maxZoom: 18,
  15. 		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>'
  16. 		}).addTo(map);
  17.  
  18.  
  19.  
  20. var i = 0;for (i = 0; i < 3; i++){
  21. 									marker='marker'+i;
  22. 									console.log(marker);
  23. 									marker= L.marker([49+i, 18.0+i]).addTo(map);
  24. 								} 		
  25.  
  26. popup = L.popup({closeButton: false,keepInView: false,minWidth:150,offset:(40, 400)}).setContent('coontenr');
  27.  
  28. marker0.bindPopup(popup);
  29. marker1.bindPopup(popup);
  30. marker2.bindPopup(popup);
  31.  
  32.  
  33.  
  34. </script>
  35. </div>
  36.  
  37. </body>
  38. </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) ?
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 16.06.2025 - 19:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn