Googleマップ内の要素にイベントハンドラを添付する情報バブル

Question

Googleマップとイベント処理/リスニングに関する質問があります。

jQueryとGoogleマップv3を使用して、ユーザーがマーカーをクリックしたときにinfobubbleを開くイベントマーカーとマーカーを配置できます。私は何をしたいのですか（しかし、これまでには分かりませんでした）、情報バブルのコンテンツに別のイベントハンドラを追加しています。たとえば、ユーザーがマップマーカーをクリックして情報泡（その部分が機能する）を開いた場合、infobubble内の何かをクリックすると、何か他のことが行われます。私はあなたがDOM Elementない要素に"click"イベントを追加しようとしている任意のヘルプ

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

のために、事前に、下記のおかげで私のコードを貼り付けています。 $('.bubble-details-button')はDOM Element（DOM Elementのラッパー）ではなく、$('.bubble-details-button')[0]です。

一方、"click"イベントを追加しようとすると、コンテンツはまだ作成されません。すでに作成されている場合にのみ、コンテンツの要素を使用して作業（たとえば、イベントの追加）することができます。その内容は、あなたがそれを処理する必要がありcreated.SoになりますときInfoBubbleは、"domready"イベントをトリガします：私はあなたが記述しているものをしなければならないシナリオで

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

を、私は直接InfoBubble内のJavaScript関数呼び出しを含めますコンテンツ。私はInfoBubble内にハイパーリンクを含むことが多いので、その場合は次のようにします。1 - ハイパーリンクのクリックを処理するJavaScript関数を記述します。 2 - マーカーを作成します。 3 - InfoBubbleを開くマーカーにクリックイベントハンドラをアタッチします。 4 - InfoBubbleコンテンツに直接埋め込まれたJavaScriptが、ステップ1で定義されたJavaScript関数を呼び出すことによってクリックイベントを処理するように設定します。

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