Javascript 单击不处理动态加载按钮

我有点困在这里了。我有一个动态加载的列表，其中有一个按钮。我有jQuery设置来处理。单击它，但什么都没有发生。下面是一些示例代码

HTML:

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

$（文档）.ready（函数（）
$.ajax({
url:'showcart'，
键入：“GET”，
数据类型：“JSON”，
成功：功能（产品）{
$。每个（产品、功能（i、产品）{
变量形式='x'；
$（“#购物车”）.append（“
”+product.name+”：“+product.qty+”
”）；
$（“#购物车”）。附加（表格）；
})
},
错误：函数（）{
console.log（“加载产品失败”）；
}
})
$（'#productForm'）。提交（函数（事件）{
event.preventDefault（）；
$.ajax({
键入：“POST”，
url:'addproduct'，
数据：$（this）.serialize（），
成功：功能（addedProduct）{
//var product=addedProduct.product；
var productName=addedProduct.product.name；
var productQty=添加的产品数量；
变量形式='x'；
console.log（'Name:'+productName+'+'Qty:'+productQty）；
$（“#购物车”）。追加（“
”+productName+”：“+productQty+”
）；
$（“#购物车”）。附加（表格）；
$（“#购物车”）.empty（）；
$.ajax({
url:'showcart'，
键入：“GET”，
数据类型：“JSON”，
成功：功能（产品）{
$。每个（产品、功能（i、产品）{
变量形式='x'；
$（“#购物车”）.append（“
”+product.name+”：“+product.qty+”
”）；
$（“#购物车”）。附加（表格）；
})
},
错误：函数（）{
console.log（“加载产品失败”）；
}
})
},
错误：函数（）{
console.log（'未能添加或更新产品'）
}
})
})
$（“.remove”）。单击（函数（）{
//event.preventDefault（）；
//var id=$（this.sibbins）（“input[name='id']”）val（）；
console.log（'id'）；
//$.ajax({
//键入：“POST”，
//url:“removeproduct”，
//数据：$（this）.serialize（），
//成功：功能（removedProduct）{
////var product=addedProduct.product；
//var productName=addedProduct.product.name；
//var productId=addedProduct.product.id；
//var productQty=添加的产品数量；
//   },
//错误：函数（）{
//console.log（'未能删除产品'）
//   }
// })
//返回false；
})
})

由于您的按钮是动态创建的，因此它不在document.ready上

最容易使用的是jQuery的on和谓词：

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

---

为什么会被否决？这是正确的答案。谢谢！这很好用@BenPotter可能是因为它引用了所有dom事件，而不是特定的按钮

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