jquery .click() 对于未触发的前置项目

Question

这段代码的前半部分工作得很好。然而第二个。如果单击某个项目将被删除，则不会触发该项目。

$(document).ready(function()
{
    $('#contact').click(function() 
    {

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

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

    });

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

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

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

    });

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

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

        $('.menu_item_content').prepend('<div class="menu_box" id="twitter_box">Twitter</div>');

    });


    //
    //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(); 
    });
});

<style>

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

</style>

<div class="menu">
    <div class="menu_items">
        <div class="menu_item" id="contact">CONTACT</div>
        <div class="menu_spacer">/</div>
        <div class="menu_item" id="about">ABOUT</div>
        <div class="menu_spacer">/</div>
        <div class="menu_item" id="twitter">TWITTER</div>
    </div>

    <div class="menu_item_content">
    </div>
</div>

Answer 1

发生这种情况的原因是因为 .click() 函数仅在代码首次计算时 (onReady) 绑定(bind)到适当的元素。由于 DOM 中尚不存在前置项，因此这些元素没有绑定(bind)到它们的 click() 事件。您可以将 .click() 绑定(bind)调用放在 .prepend() 函数调用之后，但谁知道之后您还想对 DOM 进行哪些其他更改。使用 .live() 将确保与 CSS 选择模式 '#contact_box' 匹配的每个元素都将获得绑定(bind)到其 onClick() 事件的函数，无论该元素何时添加到 DOM。

哇。希望这是清楚的。现在考虑这些更改:

// The below line was changed to a shorthand notation which means the same as $(document).ready(function(){});
$(function()
{
    $('#contact').click(function() 
    {

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

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

    });

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

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

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

    });

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

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

        $('.menu_item_content').prepend('<div class="menu_box" id="twitter_box">Twitter</div>');

    });


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

    // Changes here.
    $('#contact_box').live('click',function() 
    {
        $('#contact_box').remove(); 
    });

    // And changes here.    
    $('#about_box').live('click',function() 
    {
        $('#about_box').remove();   
    });

    // And changes here.
    $('#twitter_box').live('click',function() 
    {
        $('#twitter_box').remove(); 
    });
});

<style>

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

</style>

<div class="menu">
    <div class="menu_items">
        <div class="menu_item" id="contact">CONTACT</div>
        <div class="menu_spacer">/</div>
        <div class="menu_item" id="about">ABOUT</div>
        <div class="menu_spacer">/</div>
        <div class="menu_item" id="twitter">TWITTER</div>
    </div>

    <div class="menu_item_content">
    </div>
</div>