Question

我有点卡在这里。我有一个动态加载的列表，它有一个按钮。我有jQuery设置来处理.click但没有发生任何事情。这是一些示例代码。

HTML：

<ul id="cart">                 
<!-- Lots of products loaded here dynamically -->
<ul>

jQuery的/使用Javascript：

$(document).ready(function()

    $.ajax({
    url: 'showcart',
    type: 'GET',
    dataType: 'JSON',
    success: function(products){
      $.each(products, function(i, product){

        var FORM = '<form action="#" method="POST" id="removeFromCart"><input type="hidden" name="id" value="'+ product.id +'"><button class="remove" type="button">x</button></form>';

        $('#cart').append('<li>'+product.name+' : '+product.qty+'</li>');
        $('#cart').append(FORM);
      })
    },
    error: function(){
      console.log('FAILURE LOADING PRODUCTS');
    }
  })

  $('#productForm').submit(function(event){
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'addproduct',
      data: $(this).serialize(),
      success: function(addedProduct){
        // var product = addedProduct.product;
        var productName = addedProduct.product.name;
        var productQty = addedProduct.qty;

        var FORM = '<form action="#" method="POST" id="removeFromCart"><input type="hidden" name="id" value="'+ addedProduct.product.id +'"><button class="remove" type="button">x</button></form>';

        console.log('Name:'+productName+' '+'Qty:'+productQty);
        $('#cart').append('<li>'+productName+' : '+productQty+'</li>');
        $('#cart').append(FORM);

          $('#cart').empty();
          $.ajax({
          url: 'showcart',
          type: 'GET',
          dataType: 'JSON',
          success: function(products){
            $.each(products, function(i, product){

              var FORM = '<form action="#" method="POST" id="removeFromCart"><input type="hidden" name="id" value="'+ product.id +'"><button class="remove" type="button">x</button></form>';


              $('#cart').append('<li>'+product.name+' : '+product.qty+'</li>');
              $('#cart').append(FORM);
            })
          },
          error: function(){
            console.log('FAILURE LOADING PRODUCTS');
          }
        })
      },
      error: function(){
        console.log('Failed to add or update product')
      }
    })

  })

  $(".remove").click(function(){
    // event.preventDefault();
    // var id = $(this).siblings("input[name='id']").val();
    console.log('id');
    // $.ajax({
    //   type: 'POST',
    //   url: 'removeproduct',
    //   data: $(this).serialize(),
    //   success: function(removedProduct){
    //     // var product = addedProduct.product;
    //     var productName = addedProduct.product.name;
    //     var productId = addedProduct.product.id;
    //     var productQty = addedProduct.qty;
    //   },
    //   error: function(){
    //     console.log('Failed to remove product')
    //   }
    // })
    // return false;
  })
})

Answer 1

由于您的按钮是动态创建的，因此document.ready没有。

最简单的方法是使用谓词jQuery：

$("body").on('click', '.remove', function(){
   // do handling here.
});

jQuery .click无法处理动态加载的按钮

1 个答案: