javascript - $ (".box a").live ("click"怎么修改

Question

大家好需要一点帮助..

我知道 .live 在 jQuery v1.9 中不再工作是否有任何替代方法可以让我的下面的函数恢复工作我尝试 .on() 和 .bind() 但没有成功。这是 fiddle

HTML

<div id="container">
    <p>There are 0 boxes</p>
    <a href="#" class="more">Add more +</a>
</div>

jQuery

$(".more").click(function() {
    $("#container").append("<div class='box'><a href='#'>x</a></div>");
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
    if(count>2){
        $(".more").hide();
    }

});

$(".box a").live("click", function() {
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});

Answer 1

对动态添加的元素使用事件委托(delegate):

http://jsfiddle.net/89wTX/11/

$(".more").on('click', function() {
    $("#container").append("<div class='box'><a href='#'>x</a></div>");
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
    if(count>2){
        $(".more").hide();
    }

});

$("#container").on("click", '.box a', function() {
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});

当你只是在没有委托(delegate)的情况下使用它时，它会将监听器附加到现有元素上一次。当您添加新元素(在您的案例中为框)时，它们没有附加任何监听器。