Voqeani tinglovchini tugma - Javascript-da qo'shish

Men infowindow Google Maps uchun dinamik ravishda qo'shilgan tugmasini bir voqea tinglab qo'shishingiz harakat qilyapman.

  var contentString = '

' + '<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' + '<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>'; var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: place.geometry.location, icon: './Google_Maps_Markers/darkgreen_MarkerK.png' }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(contentString); infoWindow.open(map, this); var btn = $(contentString).filter('#btnDirection'); if(btn != null){ for(var i=0; i

Buttons are displayed on each infowindow, but when I click on nothing heppens.

Could someone help me with this ?

1
Siz yangi narsa $ (contentString) yaratmoqdasiz. $ (infoWindow.getContent ()) dasturini toping ("# btnDirection"), addEventLis & zwnj; tener (....) yoki undan ham yaxshiroq $ ("body"). "bosing", "#btnDirection", function() {....})
qo'shib qo'ydi muallif Titus, manba
Siz yangi narsa $ (contentString) yaratmoqdasiz. $ (infoWindow.getContent ()) dasturini toping ("# btnDirection"), addEventLis & zwnj; tener (....) yoki undan ham yaxshiroq $ ("body"). "bosing", "#btnDirection", function() {....})
qo'shib qo'ydi muallif Titus, manba
Ikkinchisi ishlaydi, lekin men ulardan birini bosganimda barcha tugmachalar bilan harakatni amalga oshiryapman, shu sababdan men infiname-larga bir xil identifikator bilan tugmalar qo'shyapman. Buni qanday qilib tuzatishim mumkinligini bilasizmi?
qo'shib qo'ydi muallif Aymen Ragoubi, manba
Ikkinchisi ishlaydi, lekin men ulardan birini bosganimda barcha tugmachalar bilan harakatni amalga oshiryapman, shu sababdan men infiname-larga bir xil identifikator bilan tugmalar qo'shyapman. Buni qanday qilib tuzatishim mumkinligini bilasizmi?
qo'shib qo'ydi muallif Aymen Ragoubi, manba
Men uni sinab ko'rdim. Men hozirda qo'shilaman addEventListener - bu funksiya emas.
qo'shib qo'ydi muallif Aymen Ragoubi, manba
Event.addListener bilan muammo yo'q. Infowindow-da ko'rsatilgan tugmani bosganimda ishlamayotgan narsa.
qo'shib qo'ydi muallif Aymen Ragoubi, manba
Event.addListener bilan muammo yo'q. Infowindow-da ko'rsatilgan tugmani bosganimda ishlamayotgan narsa.
qo'shib qo'ydi muallif Aymen Ragoubi, manba

8 javoblar

Infowindow tarkibi DOMga mos kelmaydigan tarzda qo'shiladi, shuning uchun InfoWindow " domready "voqea yong'inlari.

bu hujjatlar ) dan:

domeni | Dalillar: yo'q   Ushbu voqea InfoWindow tarkibini o'z ichiga olgan DOMga biriktirilganda ishdan chiqariladi. Siz info oynasi kontentini dinamik ravishda tuzayotgan bo'lsangiz ushbu hodisani kuzatishingiz mumkin.

Voqeani tinglovchilarni shu tugmalarga biriktirish uchun "dombed" hodisalarini tinglovchilarda izlash uchun jQuery kodini ishga tushiring:

google.maps.event.addListener(marker, 'click', function() {
  infoWindow.setContent(contentString);
  infoWindow.open(map, this);
 //wait for the infowindow's domready event
  google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
   //find the elements with the "btn" class and add the click listener to the one with id="btnDirection"
    var btn = $(".btn").filter('#btnDirection');
    if (btn != null) {
      for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function() {
          console.log("hello")
        });
      };
    };
  });
});

Kontseptsiya fridining isboti

kod zarbasi:

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infoWindow = new google.maps.InfoWindow();
  var contentString = '<div id="other"></div>

' + '<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' + '<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>'; var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: map.getCenter(),//place.geometry.location, }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(contentString); infoWindow.open(map, this); //wait for the infowindow's domready event google.maps.event.addListenerOnce(infoWindow, 'domready', function() { //find the elements with the "btn" class and add the click listener to the one with id="btnDirection" var btn = $(".btn").filter('#btnDirection'); if (btn != null) { for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function() { document.getElementById("other").innerHTML = "Get Direction was CLICKED"; console.log("hello") }); }; }; }); }); } google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
</div> </div>
2
qo'shib qo'ydi

Infowindow tarkibi DOMga mos kelmaydigan tarzda qo'shiladi, shuning uchun InfoWindow " domready "voqea yong'inlari.

bu hujjatlar ) dan:

domeni | Dalillar: yo'q   Ushbu voqea InfoWindow tarkibini o'z ichiga olgan DOMga biriktirilganda ishdan chiqariladi. Siz info oynasi kontentini dinamik ravishda tuzayotgan bo'lsangiz ushbu hodisani kuzatishingiz mumkin.

Voqeani tinglovchilarni shu tugmalarga biriktirish uchun "dombed" hodisalarini tinglovchilarda izlash uchun jQuery kodini ishga tushiring:

google.maps.event.addListener(marker, 'click', function() {
  infoWindow.setContent(contentString);
  infoWindow.open(map, this);
 //wait for the infowindow's domready event
  google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
   //find the elements with the "btn" class and add the click listener to the one with id="btnDirection"
    var btn = $(".btn").filter('#btnDirection');
    if (btn != null) {
      for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function() {
          console.log("hello")
        });
      };
    };
  });
});

Kontseptsiya fridining isboti

kod zarbasi:

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infoWindow = new google.maps.InfoWindow();
  var contentString = '<div id="other"></div>

' + '<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' + '<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>'; var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: map.getCenter(),//place.geometry.location, }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(contentString); infoWindow.open(map, this); //wait for the infowindow's domready event google.maps.event.addListenerOnce(infoWindow, 'domready', function() { //find the elements with the "btn" class and add the click listener to the one with id="btnDirection" var btn = $(".btn").filter('#btnDirection'); if (btn != null) { for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function() { document.getElementById("other").innerHTML = "Get Direction was CLICKED"; console.log("hello") }); }; }; }); }); } google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
</div> </div>
2
qo'shib qo'ydi

DOM tarkibiga dinamik ravishda qo'shilganda ( infoWindow -Montent), voqea-ko'rsatgichni voqeani ulashdan oldin mavjud bo'lgan yuqori elementga (masalan, body yoki xarita </​​code> -Kontainer).

Bunga quyidagilarni amalga oshirish mumkin:

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(contentString);
    infoWindow.open(map, this);

    $('body').on('click', '#btnDirection', function() {
        console.log('Hello');
    });
});

Ikkinchisi ishlaydi, lekin men ulardan birini bosganimda barcha tugmachalar bilan harakatni amalga oshiryapman. Buni qanday qilib tuzatishim mumkinligini bilasizmi?

ID-lar noyob bo'lishi kerak! Bir xil foydalanish/ma'nosi bo'lgan elementlar uchun sinflardan foydalaning. Bu savolga javob berish uchun uzr so'rayman, asosiy savolga sharh yetkaza olmayman (hali etarlicha obro'si yo'q).

1
qo'shib qo'ydi
Menga ko'proq kengaytmaysizmi? Qanday qilib har bir tugma uchun identifikatorni noyob qila olaman? va nima uchun u bir xil id bilan ishlaydi?
qo'shib qo'ydi muallif Aymen Ragoubi, manba

DOM tarkibiga dinamik ravishda qo'shilganda ( infoWindow -Montent), voqea-ko'rsatgichni voqeani ulashdan oldin mavjud bo'lgan yuqori elementga (masalan, body yoki xarita </​​code> -Kontainer).

Bunga quyidagilarni amalga oshirish mumkin:

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(contentString);
    infoWindow.open(map, this);

    $('body').on('click', '#btnDirection', function() {
        console.log('Hello');
    });
});

Ikkinchisi ishlaydi, lekin men ulardan birini bosganimda barcha tugmachalar bilan harakatni amalga oshiryapman. Buni qanday qilib tuzatishim mumkinligini bilasizmi?

ID-lar noyob bo'lishi kerak! Bir xil foydalanish/ma'nosi bo'lgan elementlar uchun sinflardan foydalaning. Bu savolga javob berish uchun uzr so'rayman, asosiy savolga sharh yetkaza olmayman (hali etarlicha obro'si yo'q).

1
qo'shib qo'ydi
Menga ko'proq kengaytmaysizmi? Qanday qilib har bir tugma uchun identifikatorni noyob qila olaman? va nima uchun u bir xil id bilan ishlaydi?
qo'shib qo'ydi muallif Aymen Ragoubi, manba

Bitta echim:

google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(contentString);
        infoWindow.open(map, this);

        $('#btnDirection').bind('click', function() {          
            console.log("hello direction") 
        }); 

        $('#btnDiscount').bind('click', function() {          
            console.log("hello discount") 
        }); 
 });

To'liq kod:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 var contentString = '

' + '<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' + '<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>'; var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, icon: './Google_Maps_Markers/darkgreen_MarkerK.png' }); var map; $(document).ready(function(){ function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: {lat: -34.397, lng: 150.644} }); var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(contentString); infoWindow.open(map, this); $('#btnDirection').bind('click', function() { alert("hello direction") }); $('#btnDiscount').bind('click', function() { alert("hello discount") }); }); } initMap(); });
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
</head>
<body>
        <div id="map" style="height:100vh;"></div>
</body>
</html>
</div> </div>
0
qo'shib qo'ydi
Ushbu yechim, original savolingizga yuborgan kod parchasi uchun ishlaydi. Agar sahifangizda btnDirection-ga ega bo'lgan boshqa elementlar bo'lsa, u ishlamaydi, lekin bu boshqa bir hikoya.
qo'shib qo'ydi muallif artemisian, manba
Ushbu yechim ishlamaydi
qo'shib qo'ydi muallif Aymen Ragoubi, manba

Bitta echim:

google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(contentString);
        infoWindow.open(map, this);

        $('#btnDirection').bind('click', function() {          
            console.log("hello direction") 
        }); 

        $('#btnDiscount').bind('click', function() {          
            console.log("hello discount") 
        }); 
 });

To'liq kod:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 var contentString = '

' + '<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' + '<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>'; var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, icon: './Google_Maps_Markers/darkgreen_MarkerK.png' }); var map; $(document).ready(function(){ function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: {lat: -34.397, lng: 150.644} }); var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(contentString); infoWindow.open(map, this); $('#btnDirection').bind('click', function() { alert("hello direction") }); $('#btnDiscount').bind('click', function() { alert("hello discount") }); }); } initMap(); });
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
</head>
<body>
        <div id="map" style="height:100vh;"></div>
</body>
</html>
</div> </div>
0
qo'shib qo'ydi
Ushbu yechim, original savolingizga yuborgan kod parchasi uchun ishlaydi. Agar sahifangizda btnDirection-ga ega bo'lgan boshqa elementlar bo'lsa, u ishlamaydi, lekin bu boshqa bir hikoya.
qo'shib qo'ydi muallif artemisian, manba
Ushbu yechim ishlamaydi
qo'shib qo'ydi muallif Aymen Ragoubi, manba

agar u bir xil identifikatorga ega bo'lsa, unda barcha hodisa bir xil identifikatorga ega bo'ladi, u har bir tugma uchun turli xil ID ishlatishi kerak.

0
qo'shib qo'ydi
Eng muhimi, agar bu bo'lsa, albatta, bir savol bo'lsa, iltimos, bu savolga javob bermang. qanday qilib so'rang ga qarang va uning o'rniga yangi savol bering.
qo'shib qo'ydi muallif Thomas Flinkow, manba
Iltimos, savolingizni batafsil tushuntirib bering.
qo'shib qo'ydi muallif Laxman Gite, manba

agar u bir xil identifikatorga ega bo'lsa, unda barcha hodisa bir xil identifikatorga ega bo'ladi, u har bir tugma uchun turli xil ID ishlatishi kerak.

0
qo'shib qo'ydi
Eng muhimi, agar bu bo'lsa, albatta, bir savol bo'lsa, iltimos, bu savolga javob bermang. qanday qilib so'rang ga qarang va uning o'rniga yangi savol bering.
qo'shib qo'ydi muallif Thomas Flinkow, manba
Iltimos, savolingizni batafsil tushuntirib bering.
qo'shib qo'ydi muallif Laxman Gite, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb