Question

My original HTML is:

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

I have the following jQuery code:

    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>'); });

And I have the following simplelightbox reference:

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

This is what’s supposed to happen:
After I click on “add-inv-button”, the HTML updates, creating an anchor with class “open-popup”. After I click on this anchor, the simplelightbox div at #popup01 (on the same page) appears (with z-index of 999).

However, this is what actually happens: After I click on the “add-inv-button”, the HTML updates correctly. But when I click on the new anchor, the browser does not jump to the #popup01 simplelightbox on the page. It clears the page and tries to link to http://www.mydomain.com/#popup01 instead, resulting in an empty page.

It seems like the jQuery simplelightbox doesn’t detect the a.open-popup link because the link was added after the page originally loaded. If I refresh the page, then everything works correctly.

How should I fix this? Thanks.

Answer 1

Add the lightbox code to the click function:

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'  
                });
});