jquery.click（）用于未触发的前置项

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

$(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>

$（文档）.ready（函数（）
{
$（“#联系人”）。单击（函数（）
{
$（“#联系人框”）。删除（）；
$（“.menu\u item\u content”）.prepend（'联系人信息在此框中'）；
});
$（'#about'）。单击（函数（）
{
$（“#关于_框”）.remove（）；
$（'.menu\u item\u content'）.prepend（'关于信息在此框中'）；
});
$（'#twitter'）。单击（函数（）
{
$（“#twitter_box”）.remove（）；
$（'.menu\u item\u content'）。前置（'Twitter'）；
});
//
//删除单个项目
//
//这下面没有什么东西会因为某种原因起火？
$（“#联系人框”）。单击（函数（）
{
$（“#联系人框”）。删除（）；
});
$（“#关于_框”）。单击（函数（）
{
$（“#关于_框”）.remove（）；
});
$（“#twitter_框”）。单击（函数（）
{
$（“#twitter_box”）.remove（）；
});
});
.菜单项
{
显示：内联；
字体系列：Tahoma；
字体大小：20px；
}
.菜单
{
显示：内联；
字体系列：Tahoma；
字体大小：45px；
}
接触
/
关于
/
啁啾

发生这种情况的原因是.click（）函数仅在首次计算代码时绑定到相应的元素（onReady）。由于DOM中还不存在带前缀的项，因此这些元素没有将click（）事件绑定到它们。您可以将.click（）绑定调用放在.prepend（）函数调用之后，但是谁知道之后您还需要对DOM进行哪些其他更改呢。使用.live（）将确保与CSS选择模式

“#contact_box”

匹配的每个元素都将使函数绑定到其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>

//下面的一行被改为简写符号，它的意思与$（document）.ready（function（）{}）相同；
$（函数（）
{
$（“#联系人”）。单击（函数（）
{
$（“#联系人框”）。删除（）；
$（“.menu\u item\u content”）.prepend（'联系人信息在此框中'）；
});
$（'#about'）。单击（函数（）
{
$（“#关于_框”）.remove（）；
$（'.menu\u item\u content'）.prepend（'关于信息在此框中'）；
});
$（'#twitter'）。单击（函数（）
{
$（“#twitter_box”）.remove（）；
$（'.menu\u item\u content'）。前置（'Twitter'）；
});
//
//删除单个项目
//
//这下面没有什么东西会因为某种原因起火？
//这里有变化。
$（“#联系人框”）.live（'单击'，函数（））
{
$（“#联系人框”）。删除（）；
});
//这里有变化。
$（“#关于_框”）.live（'单击'，函数（）
{
$（“#关于_框”）.remove（）；
});
//这里有变化。
$（“#twitter_box”）.live（'click'，function（）
{
$（“#twitter_box”）.remove（）；
});
});
.菜单项
{
显示：内联；
字体系列：Tahoma；
字体大小：20px；
}
.菜单
{
显示：内联；
字体系列：Tahoma；
字体大小：45px；
}
接触
/
关于
/
啁啾

由于您在第一个部分中“添加”了这些元素，您需要使用

.live（）

或

.delegate（）

绑定以下事件

例如：

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

如果您动态创建项，而没有直接将事件绑定到它们，则它们不知道您的事件处理程序。这完全有道理，因为该代码（绑定事件处理程序）的执行发生在创建这些元素之前

.live（）

和

.delegate（）

这类行为的“解决方法”。它们不是将事件处理程序绑定到元素本身，而是将事件处理程序绑定到父节点。Javascript事件将“冒泡”每个节点（如果没有阻止的话），因此

.live（）

将在

文档体中“监视”
的
绑定后单击事件。如果捕获到事件，它将检查
目标id
，如果匹配，则触发您的代码

现在你可以说，-天啊，天啊，这就像是一个很大的开销-你是对的。
.live（）
将在文档树的顶部（即正文）进行监视。这意味着，通过
.live（）
绑定的任何事件都必须抛出中间的任何节点。
因此，来自
jQuery
的聪明人说，等一下，如果你知道你要动态创建的任何新元素的根节点，就应该足够在那里观察冒泡事件，
.delegate（）
就诞生了。您可以告诉
.delegate（）
要观察的父节点，不再需要额外的开销

参考：，
你能发布HTML吗？有点吹毛求疵，但我会使用
$（这个）。删除（）
。那么jQuery就不必再次在DOM中搜索元素了。要明确的是，他在底部的
删除单个项目
部分中谈到了。实际上我也尝试过，但它不起作用，但一旦开始运行，可能会切换到该状态。防止前半部分代码触发。。。菜单项。我明白你的意思，但是为什么代码的前半部分可以工作，即使元素在创建它们之前不存在？上面的部分：/////删除单个项///由于某种原因，下面的任何内容都不会触发？我将其更改为：$（'contact_box'）.live（'click'，function（）{$（'contact_box'）.remove（）；}）；函数的前一半不需要任何修改，因为它们不会随着您的任何代码而改变。然而，下半部分是将您定义的匿名函数绑定到任何使用
id='''u-box'
定义的元素，因此它不会绑定，因为