Appending HTML with click function jQuery not working
<p><a href="http://jsfiddle.net/CCKUz/" rel="nofollow">http://jsfiddle.net/CCKUz/</a></p>

<p>So I have a box with a <code>&lt;span class="open"&gt;</code> that will increase the height of a collapsible div to view the content. It's collapsible simply by CSS height and the open click function sets height to auto. Easy and this works. </p>

<p>The problem happens when I go to append the open and close spans. When I include them in the actual html, they work fine. When I append them, they no longer function. I thought maybe this was due to not being available for the js to apply the .click function to them since they were created after the load but even creating them and applying the .click in the same function doesn't help this problem.</p>

<p>Is there anything you see there that might be affecting this? Thanks.</p>

<p>HTML:</p>

<pre><code>&lt;div class="box collapsible"&gt;
    &lt;h3&gt;Title&lt;/h3&gt;
    &lt;p&gt;This is a sample paragraph that is here for placer purposes.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.box { height: 20px; border: 1px solid #000000; padding: 10px; margin: 20px; position:   relative; overflow: hidden; }
h3 { margin: 0 0 20px 0; line-height: 20px; }
.open, .close { text-indent: -9999px; width: 20px; height: 20px; position: absolute; top:  10px; right: 10px; }
.open { background: #00ff00; }
.close { background: #0000ff; }
</code></pre>

<p>JS:</p>

<pre><code>$(function(){
        var box = $(".collapsible");
        var close = $(".collapsible span.close");
        var open = $(".collapsible span.open");
        box.each(function(){
            box.append('&lt;span class="open"&gt;Open&lt;/span&gt;');
            open.each(function(i){
                open.click(function(){
                    alert("You clicked open");
                    $(this).parent(box).css("height","auto").append('&lt;span class="close"&gt;Close&lt;/span&gt;');
                    $(this).hide();
                    $(this).parent().find(close).show();
                });
            });
            close.each(function(i){
                close.click(function(){
                    $(this).parent(box).css("height","15px");
                    $(this).hide();
                    $(this).parent().find(open).show();
                });
            });
        });
    });
</code></pre>
