如何为AJAX动态生成的按钮绑定点击事件触发API请求

你遇到的是jQuery动态生成DOM元素的事件绑定问题，直接用.click()只能绑定页面初始加载时已存在的元素，每秒刷新生成的动态按钮不在初始DOM结构中，因此绑定失效，同时原有选择器写法也存在错误，按以下步骤修改即可：

步骤1：修正原有代码错误并优化按钮生成逻辑 #

首先修正你for循环的语法错误，同时给按钮添加data-order-id自定义属性存储订单ID，后续提取ID更方便：

$(document).ready(function(){
  function fetch_openorderdetails() {
    $.ajax({
      url:"/api/v1/open-orders/1",
      dataType:"json",
      success:function(details) {
        var html = '';
        // 修正原for循环的变量错误
        for(var count=0; count < details.length; count++) {
          var id = details[count].id
          var currentvalue = details[count].price;
          // 添加data-order-id属性存储ID，同时给按钮加专属类sell-btn方便选择
          html += '<button class="btn btn-danger sell-btn" data-order-id="'+ id +'" id="sellbutton_'+ id +'" >SELL ($'+currentvalue+')</button>';  
        }
        $('#all-open-orders').html(html);
      }
    })
  }
  setInterval(function(){fetch_openorderdetails()}, 1000);
})

步骤2：用事件委托绑定点击事件 #

将点击事件绑定到始终存在的父容器#all-open-orders上，利用事件冒泡机制匹配动态生成的按钮，同时提取按钮上存储的订单ID拼接到请求URL中：

// 事件委托写法：父元素.on('事件名', '子元素选择器', 回调函数)
$('#all-open-orders').on('click', '.sell-btn', function(e) {
  e.preventDefault();
  // 获取按钮上存储的订单ID
  const orderId = $(this).data('order-id');
  $.ajax({
    type: "POST",
    // 拼接ID到请求URL
    url: "/sell_trigger_by_OID/" + orderId,
    data: {},
    success: function(result) {
      alert('ok');
    },
    error: function(result) {
      alert('error');
    }
  });
});

原理说明 #

事件委托是将事件绑定到不会被动态替换的父级元素上，触发事件时会从点击的子元素向上冒泡到父元素，父元素再校验触发事件的元素是否符合指定的子元素选择器规则，因此无论子元素是初始存在还是后续动态生成的，都能正常触发回调。

内容的提问来源于stack exchange，提问作者Fannie Johnson