jquery .click() for prepended items not firing
<p>The first half of this code works perfectly. However the second. Where an items is removed if you click it does not fire.</p>

<pre><code>$(document).ready(function()
{
    $('#contact').click(function() 
    {

        $('#contact_box').remove();

        $('.menu_item_content').prepend('&lt;div class="menu_box" id="contact_box"&gt;Contact INFO goes in this box.&lt;/div&gt;');

    });

    $('#about').click(function() 
    {

        $('#about_box').remove();

        $('.menu_item_content').prepend('&lt;div class="menu_box" id="about_box"&gt;About info goes in this box.&lt;/div&gt;');

    });

    $('#twitter').click(function() 
    {

        $('#twitter_box').remove();

        $('.menu_item_content').prepend('&lt;div class="menu_box" id="twitter_box"&gt;Twitter&lt;/div&gt;');

    });


    //
    //remove single items
    //
    //nothing below this fires for some reason?

    $('#contact_box').click(function() 
    {
        $('#contact_box').remove(); 
    });

    $('#about_box').click(function() 
    {
        $('#about_box').remove();   
    });

    $('#twitter_box').click(function() 
    {
        $('#twitter_box').remove(); 
    });
});

&lt;style&gt;

.menu_item
{
    display:inline;
    font-family:Tahoma;
    font-size:20px;
}
.menu_spacer
{
    display:inline;
    font-family:Tahoma;
    font-size:45px;
}

&lt;/style&gt;

&lt;div class="menu"&gt;
    &lt;div class="menu_items"&gt;
        &lt;div class="menu_item" id="contact"&gt;CONTACT&lt;/div&gt;
        &lt;div class="menu_spacer"&gt;/&lt;/div&gt;
        &lt;div class="menu_item" id="about"&gt;ABOUT&lt;/div&gt;
        &lt;div class="menu_spacer"&gt;/&lt;/div&gt;
        &lt;div class="menu_item" id="twitter"&gt;TWITTER&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="menu_item_content"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
