1

嗨，伙计们需要一点帮助..

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

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();}
});
4

5 回答 5

2

对动态添加的元素使用事件委托：

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();}
});

当您在没有委托的情况下使用 on 时，它会将侦听器一次附加到现有元素。当您添加新元素（在您的情况下为框）时，它们没有附加侦听器。

于 2013-11-13T06:37:09.537 回答
1

试试这个 http://jsfiddle.net/devmgs/89wTX/9/

$(document).on("click",".box a", function() {
    console.log("removeing");
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});
于 2013-11-13T06:39:33.590 回答
1

你的脚本代码应该是这样的；

$(".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").click(function() {
  $(this).parent().remove();
  var count = $(".box").length;
  $("p").text("There are " + count + " boxes.");
    if(count<3)
     {
      $(".more").show();
     }
  });   
});

这是小提琴

于 2013-11-13T06:40:49.833 回答
0

用于：

$(".box").on("click","a", function() {...})
于 2013-11-13T06:34:28.853 回答
0 
$(".box").on("click","a", function() {
   ....
});

参考_

于 2013-11-13T06:35:49.570 回答