jQuery insertion of an anchor doesn't work
<p>My original HTML is:</p>

<pre><code>&lt;div class="add-inv-button"&gt;Add to Your Game Plan &lt;/div&gt;
</code></pre>

<p>I have the following jQuery code:</p>

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

<p>And I have the following simplelightbox reference:</p>

<pre><code>$(function(){
    jQuery("a.open-popup").simpleLightbox({
        closeLink:'a.close'  
    });
})
</code></pre>

<p>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).</p>

<p>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 www.mydomain.com/#popup01 instead, resulting in an empty page.</p>

<p>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.</p>

<p>How should I fix this? Thanks.</p>
