Ajax动态创建的元素无法生效，Laravel项目技术求助

这是前端开发里很常见的一个坑——当你通过Ajax动态生成元素后，直接绑定在元素上的事件不会生效，因为页面初始加载时这些元素还不存在，事件绑定根本没作用到它们身上。

问题根源 #

假设你原来给删除按钮绑定事件的代码是类似这样的：

$('.glyphicon-remove').on('click', function() {
  // 你的删除逻辑
});

这种写法只会给页面加载完成时已经存在的DOM元素绑定事件，后续通过Ajax追加的新元素不会自动继承这个事件绑定。

解决方案：事件委托 #

事件委托的思路是把事件绑定到一个已经存在的父级容器（比如你用来存放购物车项的.cart），让父容器监听子元素的事件触发。这样不管子元素是一开始就有，还是后来动态添加的，都能触发对应的事件。

给你写个具体的实现示例：

// 绑定到.cart容器，监听内部的.glyphicon-remove点击
$('.cart').on('click', '.glyphicon-remove', function() {
  // 获取动态元素的ID，也就是你设置的{{$carrinho->id_material}}
  var itemId = $(this).attr('id');
  
  // 这里可以编写你的删除逻辑，比如发起Ajax请求移除购物车项
  $.ajax({
    type: 'get',
    url: '/removeCartItem', // 替换成你的删除接口地址
    data: { 'item_id': itemId },
    success: function(res) {
      // 删除成功后，移除对应的DOM元素
      $(this).closest('div').remove();
      // 还可以在这里更新购物车总数、金额等UI
    }.bind(this) // 绑定this指向，确保内部$(this)能正确指向当前点击的删除按钮
  });
});

额外优化提示 #

• 优先选择离动态元素最近的已存在父容器（比如这里的.cart），而不是直接绑定到document上，这样能减少事件冒泡的性能损耗。
• 确保动态元素的选择器（比如.glyphicon-remove）和你绑定事件时用的选择器完全一致，避免因为类名写错导致事件不触发。
• 如果不需要事件冒泡，可以在事件处理函数里加上event.stopPropagation()来阻止。

把这段事件委托的代码加到你的原有JS逻辑里，动态生成的删除按钮就能正常工作啦！

内容的提问来源于stack exchange，提问作者Jean Morrison