2

我正在使用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，当我单击页面时，灯箱会弹出并消失......就像它应该做的那样，但是我只能这样做一次。如果我再次单击，灯箱不会再次弹出。有什么办法吗？

4

2 回答 2

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

于 2013-02-05T11:18:39.690 回答
0

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

jQuery('.team-member').live('click',function() {
    jQuery(this).children('.member-info').lightbox_me({
        centered: true
    });
});
于 2013-02-05T11:05:24.447 回答