Đính kèm trình xử lý sự kiện vào phần tử bên trong bong bóng thông tin bản đồ google

Question

Tôi có câu hỏi liên quan đến bản đồ google và xử lý sự kiện/nghe.

Sử dụng jQuery và bản đồ google v3, tôi có thể đặt điểm đánh dấu bản đồ và trình xử lý sự kiện sẽ mở ra một infobubble khi người dùng nhấp vào điểm đánh dấu. Những gì tôi muốn làm (nhưng cho đến nay vẫn chưa thể tìm ra) là thêm một trình xử lý sự kiện khác vào nội dung của bong bóng thông tin. Ví dụ: nếu người dùng nhấp vào điểm đánh dấu trên bản đồ, hãy mở bong bóng thông tin (phần đó hoạt động) và sau đó nếu họ nhấp vào nội dung nào đó bên trong infobubble sẽ làm điều gì đó khác. Tôi đã dán mã của tôi dưới đây, cảm ơn trước sự giúp đỡ nào

function addMarker(data) { 
    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude); 
    var title = data.title? data.title: ""; 
    var icon = $('#siteUrl').val() + 'img/locate.png'; 

var bubbleContentString = "<span class=\"bubble-details-button\">Get Details about " + title+ "</span>"; 

myInfoBubble = new InfoBubble({ 
    content: bubbleContentString, 
    hideCloseButton: true,   
    backgroundColor: '#004475', 
    borderColor: '#004475' 
}); 

var myMarker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: title, 
     icon: icon 
    });  
addListenerToMarker(myMarker, myInfoBubble); 
markerSet.push(myMarker, myInfoBubble);  
} 
function addListenerToMarker(marker, bubble){ 
    console.log($(bubble.getContent()).find('.bubble-details-button')[0]); 
    google.maps.event.addListener(marker, 'click', function() { 
     if (!bubble.isOpen()) { 
      google.maps.event.addListenerOnce(bubble, 'domready', function(){ 
       console.log($(bubble.getContent()).find('.bubble-details-button')[0]); 
       google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ 
        alert("hi"); 
       }); 
      }); 
      bubble.open(map, marker); 
     }  
    }); 
} 

Answer 1

Bạn đang cố gắng thêm "click" sự kiện trên phần tử, mà không phải là DOM Element. $('.bubble-details-button') không phải là DOM Element (nó là một wrapper của DOM Element), nhưng $('.bubble-details-button')[0] là.

Mặt khác, khi bạn đang cố thêm "click" sự kiện, nội dung chưa được tạo. Bạn có thể làm việc (ví dụ: thêm sự kiện) với các thành phần của nội dung, chỉ khi chúng đã được tạo. Các InfoBubble sẽ kích hoạt "domready" sự kiện, khi nội dung của nó sẽ created.So bạn cần phải xử lý nó:

if (!bubble.isOpen()) { 
    google.maps.event.addListenerOnce(bubble, 'domready', function(){ 
     google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ 
      alert("hi"); 
     }); 
    }); 
    bubble.open(map, mymarker);   
} 

Answer 2

Trong kịch bản mà tôi phải làm những gì bạn mô tả, tôi bao gồm một hàm JavaScript gọi trực tiếp trong InfoBubble Nội dung. Tôi thường bao gồm các siêu liên kết trong một InfoBubble, vì vậy trong trường hợp đó tôi làm như sau: 1 - Viết một hàm JavaScript để xử lý một nhấp chuột siêu liên kết. 2 - Tạo điểm đánh dấu. 3 - Đính kèm trình xử lý sự kiện nhấp chuột vào điểm đánh dấu mở một InfoBubble. 4 - Xác định nội dung của InfoBubble để JavaScript nhúng trực tiếp vào nội dung InfoBubble được đặt để xử lý sự kiện nhấp bằng cách gọi hàm JavaScript đã được xác định trong BướC# 1 - như sau:

"<span>" + 
    "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
     displayTextContent + "</a>" + 
"</span>"