jQuery 单击仅有效一次

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