jquery - 理解 JQuery 选择器的问题

Question

例如，如果我点击 add+ 9 次，我将有 10 个框。但之后，只有当A单击最后一个框时，它才会隐藏。 (我想通过单击该框来隐藏特定框)。顺便说一句，单击(并消除)最后一个框后，另一个框将不会以任何方式隐藏 我的问题是什么？

$(document).ready(function(){
    $("#add").click(function(){
        $(".test:last").clone().insertAfter(this);
    })
    $(".test").click(function(){
        $(this).hide("slow");
    })
})

<div id="add">ADD+</div>
<div class="test" style="border:1px solid black; width:70px; height:25px;">
    box
</div>

Answer 1

因为您只是连接文档加载时存在的那个。改变

$(".test").click(function(){
    $(this).hide("slow");
})

至

$(".test").live('click', function(){
    $(this).hide("slow");
});

click 用于将事件连接到已经存在的元素。使用live，您可以更具推测性，并说“为任何已存在的事件、和我稍后添加的与此选择器匹配的任何事件 Hook ”。如果您想要 live 的功能，还有一个 delegate 会很有用，但它适用于特定元素的后代。

详细信息:

• click
• live
• delegate