Как получить доступ к Div внутри Google Maps InfoBox?

Question

Я пытаюсь выбрать <div>, используя jquery's $('#divname') внутри информационного блока, который генерирует Google Maps при нажатии на любой из множества маркеров на карте.

Проблема: Когда я пытаюсь получить доступ к div, используя $("#gallery") после нажатия на маркер, то есть внутри слушателя события щелчка этого маркера, ничего не происходит. Я попытался получить html, содержащийся в этом div, от прослушивателя кликов, используя console.log($("#gallery").html()), и он возвращает null !! Как я могу выбрать этот div!?

Код фрагмента прослушивателя событий Click

// Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {

    infoboxes[this._index].open(map, markers[this._index]);
    infoboxes[this._index].show();
    console.log($('#gallery').html());

* * 1016});

Код фрагмента информации Infobox

for( i = 0; i < json.length; i++) {

    // Place markers on map
    var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
    markers.push(marker);

    // Create infowindows
    var boxText = '<div id="infobox"> \
                        <div id="infobox_header_title"> \
                            <span id="infobox_header_price">$' + json[i].price + '</span> \
                            <span id="infobox_header_room">' + json[i].bedroom + 'br </span> \
                            <span id="infobox_header_address">' + json[i].address_1 + '</span> \
                        </div> \
                        <div id="gallery"> \
                            <img src="images/cl/' +  json[i].photos[0] + '.jpg" /> \
                            <img src="images/cl/' +  json[i].photos[1] + '.jpg" /> \
                        </div> \
                    </div>';
    var infoboxOptions = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: { 
        },
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: true,
        pane: "floatPane",
        enableEventPropagation: false
        };

    var infobox = new InfoBox(infoboxOptions);
    infoboxes.push(infobox);

            //<Click Event Listener code comes in here>

Answer 1

Из того, что я вижу, вы добавляете маркеры в цикл?Таким образом, вы используете один и тот же идентификатор для каждого информационного окна маркера, и это противоречит правилам HTML / JS / CSS, чтобы иметь более одного элемента с одинаковым идентификатором, и это нормально для сбоя.Вместо этого я использовал бы только классы для моих маркеров, и в прослушивателе событий вы могли бы получить содержимое .gallery div следующим образом (не пробовал, но вы должны понять, если он не работает):

// Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {

    infoboxes[this._index].open(map, markers[this._index]);
    infoboxes[this._index].show();
    console.log($(infoboxes[this._index].getContent()).find('.gallery'));

});