Question

我原来的HTML是：

<div class="add-inv-button">Add to Your Game Plan </div>

我有以下jQuery代码：

    jQuery('.add-inv-button').click(function(){  
    jQuery(this).removeClass('add-inv-button');
    jQuery(this).addClass('completed-button');
    jQuery(this).html('<a class="open-popup" href="#popup01">Done it!</a>'); });

我有以下simplelightbox参考：

$(function(){
    jQuery("a.open-popup").simpleLightbox({
        closeLink:'a.close'  
    });
})

这是应该发生的事情：点击“add-inv-button”后，HTML更新，创建一个类“open-popup”的锚点。单击此锚点后，将出现＃popup01（在同一页面上）的simplelightbox div（z-index为999）。

然而，实际情况就是这样：点击“add-inv-button”后，HTML会正确更新。但是当我点击新锚点时，浏览器不会跳转到页面上的＃popup01 simplelightbox。它清除页面并尝试链接到www.mydomain.com/#popup01，导致页面空白。

似乎jQuery simplelightbox没有检测到a.open-popup链接，因为链接是在最初加载页面后添加的。如果我刷新页面，那么一切正常。

我该如何解决这个问题？感谢。

Answer 1

将灯箱代码添加到点击功能：

jQuery('.add-inv-button').click(function(){  
    jQuery(this).removeClass('add-inv-button')
                .addClass('completed-button')
                .html('<a class="open-popup" href="#popup01">Done it!</a>')
                .find("a.open-popup").simpleLightbox({
                   closeLink:'a.close'  
                });
});

jQuery插入锚点不起作用

1 个答案: