jquery.click()用于未触发的带前缀的项

自从你在第一个 零件 ,您需要使用 .live() .delegate() 将下面的事件绑定起来。

例子:

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

直接地 将事件绑定到它们,它们不知道您的事件处理程序。这是完全有意义的,因为代码的执行(绑定事件处理程序)会发生 之前 这些元素是被创造出来的。

.live() .delegate() 有点“变通”这种行为。它们不是将事件处理程序绑定到元素本身,而是将事件处理程序绑定到父节点。Javascript事件将“冒泡”每个节点(如果不阻止的话),所以 将“看”在 document.body 对于 click events target id 如果你的密码匹配就开火。

将在文档树的顶部(即正文)进行监视。也就是说,任何通过 我得吐泡泡了 中间的节点。 jQuery 说,等一下,如果你 知道 对于要动态创建的任何新元素的根节点,它应该足以在那里监视冒泡事件 .delegate() .delegate()

参考文献: .live() , .delegate()

之所以会发生这种情况,是因为.click()函数在第一次计算代码时仅绑定到相应的元素(onReady)。由于DOM中还不存在前缀项,因此这些元素没有将click()事件绑定到它们。您可以将.click()绑定调用放在.prepend()函数调用之后,但是谁知道以后您还想对DOM做什么其他更改呢。使用.live()将确保与CSS select模式匹配的每个元素 '#contact_box' 无论何时将元素添加到DOM,都会将函数绑定到其onClick()事件。

呼。希望这是清楚的。现在考虑这些变化:

// 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>