Question

我正在使用Infobox plugin（而不是InfoWindow）在Google地图中创建标记的动态内容。我有每个标记的动态内容，点击标记后显示。在Infobox内部有一个动态创建的图像，因此我调用了on方法，因为lightbox会处理这些元素。

但我需要在图片上点击两次（第一次它会初始化所有动态a[rel*=lightbox]，第二次点击它会在灯箱中显示大图片。）

为什么会发生这种情况以及如何避免这种情况？

var ib = new InfoBox({
    content: "",
    disableAutoPan: false,
    maxWidth: 320,
    pixelOffset: new google.maps.Size(-160, 0),
    zIndex: null,
    boxStyle: {
        color: "#fff",
        background: "url('../i/1px_tmavsi.png') repeat",
        width: "320px",
        padding: "0px",
        fontSize: "14px"
    },
    closeBoxMargin: "0px",
    closeBoxURL: "",
    enableEventPropagation: true,
    infoBoxClearance: new google.maps.Size(1, 1)
});

google.maps.event.addListener(m, 'click', (function() {
    return function() {
        ib.setContent("<div class='ib_content'><a href='/i/big.jpg' rel='lightbox'><img src='/i/small.jpg' /></a></div>");
        ib.open(map, marker);
        map.panTo(new google.maps.LatLng(GPS[0], GPS[1]));

        //$(document).on("focusin", ".ib_content", function(e) {
        $(document).on("click", "a[rel*=lightbox]", function(e) {
            e.preventDefault();

            $("a[rel*=lightbox]").lightBox();
        });
    }
})());

Answer 1

我对此有所了解:)

google.maps.event.addListener(m, 'click', (function(i) {
    return function() {
        ib.setContent("<div class='ib_content'><a href='/i/big.jpg' rel='lightbox' id='lightbox_"+i+"'><img src='/i/small.jpg' /></a></div>");
        ib.open(map, marker);
        map.panTo(new google.maps.LatLng(GPS[0], GPS[1]));

        $("#lightbox_"+i).click(function(e) {
            e.preventDefault();    
            $("#lightbox_"+i).lightBox();
        });
    }
})(i));

<强>更新看看我的例子 http://jsfiddle.net/rbss1ej0/14/

Answer 2

这解决了这个问题，只是将监听器添加到ib（信息框），当更改后，lightbox重新初始化为新的images：

google.maps.event.addListener(ib, 'domready', function() {
  $("a[rel*=lightbox]").lightBox();
});

其他代码是相同的：

google.maps.event.addListener(m, 'click', (function() {
    return function() {
        ib.setContent("<div class='ib_content'><a href='/i/big.jpg' rel='lightbox'><img src='/i/small.jpg' /></a></div>");
        ib.open(map, marker);
        map.panTo(new google.maps.LatLng(GPS[0], GPS[1]));
    }
})());

如何避免在动态创建的元素上单击两次以触发lightbox（）？

2 个答案: