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

我正在谷歌地图中创建标记的动态内容-使用

Infobox插件

（而不是

InfoWindow

）。我有每个标记的动态内容，单击标记后显示。在Infobox内部有一个动态创建的图像，因此我调用

on

方法，以使

lightbox

将处理这些元素

但是我需要在图像上单击两次（第一次它将初始化所有动态

a[rel*=lightbox]

，第二次单击它将在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();
        });
    }
})());

var ib=新信息框({
内容：“，
disableAutoPan:错，
最大宽度：320，
pixelOffset:new google.maps.Size（-160,0），
zIndex:null，
箱式：{
颜色：“fff”，
背景：“url（'../i/1px_tmavsi.png'）重复”，
宽度：“320px”，
填充：“0px”，
字体大小：“14px”
},
closeBoxMargin：“0px”，
closeBoxURL:“”，
enableEventPropagation:true，
infoBoxClearance:new google.maps.Size（1,1）
});
google.maps.event.addListener（m，'click'，（function（））{
返回函数（）{
ib.setContent（“”）；
ib.open（地图、标记）；
panTo（新的google.maps.LatLng（GPS[0]，GPS[1]）；
//$（文件）.on（“focusin”，“.ib_内容”，函数（e）{
$（文档）。在（“单击”，“a[rel*=lightbox]”上，函数（e）{
e、 预防默认值（）；
$（[a[rel*=lightbox]）；
});
}
})());

我有个主意：）

google.maps.event.addListener（m，'click'，（函数（i）{
返回函数（）{
ib.setContent（“”）；
ib.open（地图、标记）；
panTo（新的google.maps.LatLng（GPS[0]，GPS[1]）；
$（“#灯箱"+i）。单击（函数（e）{
e、 预防默认值（）；
$（“#lightbox_”+i）.lightbox（）；
});
}
})（i） ）；

更新 看我的例子

---

这解决了问题，只需将侦听器添加到

ib

（信息框），当其更改时，

lightbox

将为新的

图像重新初始化：

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]));
    }
})());

google.maps.event.addListener（m，'click'，（function（））{
返回函数（）{
ib.setContent（“”）；
ib.open（地图、标记）；
panTo（新的google.maps.LatLng（GPS[0]，GPS[1]）；
}
})());
您可以在此处尝试：
http://www.cyklomapy.sk/trasa/732f2d264baecec80e8fe3820beb01adc4b1a13e
，有两个轨迹点（蓝色图标），单击其中一个，有一个图像，我需要用作
lightbox
。它无法工作，因为第一次单击图像时，它将使用
$（“#lightbox”）初始化lightbox+i） .lightBox（）
，只有当您第二次单击时，它才会在lightBox中显示大照片。我以前尝试过这种方法，您不能在动态创建的元素上这样做。这将忽略lightBox并在整个浏览器选项卡中打开大图像。您不能使用
。单击（）
关于动态创建的元素。您的解决方案不起作用。您的示例正在做一些非常不同的事情。我正在动态更改
信息框的内容，然后尝试在其上重新初始化
lightbox
。解决方案很简单-使用
google.maps.event.addListener（ib，'domready'，function（）…
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]));
    }
})());