Question

我正在使用http://buckwilson.me/lightboxme/脚本。

以下是HTML（页面上有多个.team-member）：

<div class="team-member">
    <div class="featured-photo"></div>
        <h3></h3>
        <h4></h4>
    <div class="member-info">
        <h5></h5>
        <p class="member-photo"></p>
    </div>
</div>

这是我的JS：

<script>
jQuery('.team-member').click(function() {
    jQuery(this).children('.member-info').lightbox_me({
        centered: true
    });
});
</script>

我可以点击每个.team-member，当我点击页面时，灯箱弹出并消失...就像它应该的那样，但是我只能这样做一次。如果再次单击，灯箱不会再次弹出。有什么方法吗？

Answer 1

这种情况正在发生，因为lightbox_me正在将DOM元素移出其初始位置，并在应用其样式之前将其附加到正文。这与jQuery对话框的行为类似，如果您熟悉它。

由于选择取决于父级层次结构，因此下次发生单击事件时，jQuery(this).children('.member-info')将不返回任何匹配的对象，并且对lightbox_me的调用将失败。

您可以通过在对象进行光盘化之前克隆对象，然后将 destroyOnClose 标志设置为true来解决此问题。

jQuery('.team-member').click(function() {
    jQuery(this).children('.member-info').clone().lightbox_me({
        centered: true,
        destroyOnClose: true
    });
});

jsfiddle

Answer 2

由于您没有提供任何小提琴链接，我不确定，但您可以尝试以下方式查看是否有效

jQuery('.team-member').live('click',function() {
    jQuery(this).children('.member-info').lightbox_me({
        centered: true
    });
});

jQuery点击只能工作一次

2 个答案: