Jquery,无法删除新创建的li元素

时间:2013-03-11 20:23:27

标签: jquery

作为我正在制作购物车的uni项目,到目前为止,您可以将产品添加到购物车,如果您刷新页面,则可以从购物车中删除商品。

但是当项目添加到购物篮时,如果没有先刷新浏览器,则无法将其从购物车中删除。那是为什么?

这是我的删除项目表格购物车功能

    $('.del').on("click",function(){
    var id= this.id;
    var productId = $('#productId-'+id).text();
    var productPrice = $('#price-'+id).text();
    var total = $('#total').text();
    var newPrice = (parseFloat(total) - parseFloat(productPrice)).toFixed(2);
    var dataString = 'id='+ id;
    cartSize--;

    $('#total').html(newPrice);     
    $("#cart-"+id).slideUp('slow', function() {$(this).remove();});

    $.ajax({
        type: "POST",
        url: "resources/del.php",
        data: dataString,
        cache: false,
        success: function(html){
            $('#added-'+productId).fadeOut('Fast');
            $('#product-'+productId).delay(600).fadeIn('Fast');

            if(cartSize == 0){
                $('#noItems').fadeIn('Fast');
                $('#mainCart').fadeOut('Fast');     
            }
        }
    });
    return false;   

});

});

并且我的添加到购物车功能:

     $('.addToCart').click(function(){
    var id = this.id;
    var price = parseFloat($('#priceAdd-'+id).val()).toFixed(2);;
    var name = $('#name-'+id).val();
    var total =(parseFloat($('#total').text())+parseFloat(price)).toFixed(2);
    cartSize++;

    $('#product-'+id).fadeOut('fast');
    $('#added-'+id).delay(500).fadeIn('fast');

    $.ajax({
        type: "POST",
        url: 'resources/addToCart.php',
        data: { itemId: id , name: name, price: price},
        cache: false,
        success: function(html){
            $("ol").append(html).slideDown("slow");
            $('#noItems').fadeOut('fast');
            $('#total').html(total);
            $('#mainCart').fadeIn('fast');
        }
    });
});

非常感谢任何输入。

2 个答案:

答案 0 :(得分:3)

您需要使用.on(),以便它适用于将来的元素,就像使用已弃用的 .live()函数一样。

N.B。 .on()不仅仅是.live()的别名,语法也不同。

$(document).on('click', '.del', function(){...});

我在那里使用过文档,但最好选择一个元素作为你动态创建的元素的较近父元素,例如。

$('#basket').on('click', '.del', function(){...});

http://api.jquery.com/on/

答案 1 :(得分:2)

您不想使用.live(),因为:“从jQuery 1.7开始,不推荐使用.live()方法。”

您想使用.on()

$('#myListItems').on("click", ".del" ,function(e) {
   $(e.target).remove()
});

jQuery's on method