jQuery click仅起作用一次

Question

我使用的是http://buckwilson.me/lightboxme/脚本。

这是超文本标记语言(页面上有多个.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，当我点击page...just时，灯箱就会弹出并消失，但我只能这样做一次。如果我再次点击，灯箱不会再次弹出。有什么办法可以解决这个问题吗？

Answer 1

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

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

您可以通过在对对象进行lightboxing之前克隆该对象，然后将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
    });
});