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）绑定到相应的元素。由于DOM中尚未存在前置项，因此这些元素不会将click（）事件绑定到它们。您可以在.prepend（）函数调用之后调用.click（）绑定调用，但是谁知道之后您想要对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>

Answer 2

由于您在第一个部分中“添加”了这些元素，因此您需要使用.live()或.delegate()来绑定以下事件。

示例：

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

如果你动态创建项目而你错过直接绑定事件给他们，他们不知道你的事件处理程序。这是完全有道理的，因为该代码（绑定事件处理程序）的执行发生在之前那些元素被创建。

.live()和.delegate()类似“解决方法”这种行为。它们将事件处理程序绑定到父节点，而不是将事件处理程序绑定到元素本身。 Javascript事件将“冒泡”每个节点（如果没有阻止），因此.live()将在绑定后document.body click events“观察”target id。如果它捕获了一个事件，它会检查.live()并触发你的代码匹配。

现在你可以说， - 男孩哦，男孩，这就像很多开销 - 你会是正确的。 .live()将在文档树的顶部（即正文）进行观察。这意味着，任何通过jQuery绑定的事件都必须冒出来，在其中抛出任何节点。所以来自.delegate()的聪明人说，等一下，如果你知道你想要动态创建的任何新元素的根节点，它应该足以观察到冒泡那里的事件和.delegate()诞生了。您可以告诉{{1}}父节点要观察，不再需要开销！

参考：.live()，.delegate()

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

2 个答案: