Jquery, 새로 생성 된 li 요소를 삭제할 수 없습니다.

Question

장바구니를 만들고있는 단일 프로젝트로서 지금까지 카트에 제품을 추가 할 수 있으며 페이지를 새로 고침하면 장바구니에서 항목을 삭제할 수 있습니다.

그러나 항목을 바구니에 추가하면 먼저 브라우저를 새로 고치지 않고 카트에서 항목을 삭제할 수 없습니다. 왜 그런가요?

이 내 삭제 항목 폼 카트 기능

$('.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; 

}); 

입니다

});

과를 heres 쇼핑 카트 기능에 추가 할 수도있다 :

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

모든 입력이 크게 감상 할 수있다. 그것이 미래의 요소에 적용되도록 당신이 되지.live() 기능을 것 같은

Answer 1

당신은 때문에 .live()를 사용하지 않습니다. "jQuery를 1.7로, .live() 메소드가 사용되지 않습니다"

당신은 .on()

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

jQuery's on method

를 사용하려면

Answer 2

당신은, .on()를 사용해야합니다.

N.B. .on()은 단순히 .live()의 별칭이 아니며 구문이 다릅니다.

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

나는 거기에서 문서를 사용했지만, 동적으로 생성하는 것의 더 가까운 부모로 존재하는 요소를 선택하는 것이 좋습니다.

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

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