getJson循环内点击事件失效问题求助

你的问题出在事件绑定的时机不对：页面加载时，$(".Qlty button").click(...)就已经执行了，但此时.Qlty button还没被创建出来（因为getJSON是异步请求，要等请求完成后才会把元素添加到页面）。jQuery找不到目标元素时不会报错，只会跳过事件绑定，所以点击按钮自然没反应。

下面是两种可行的解决方案：

方案1：事件委托（推荐） #

把事件绑定到页面加载时就存在的父元素上（比如#mainDiv），利用事件冒泡机制，过滤出真正触发事件的子元素。这种方式对现在和未来动态生成的元素都生效：

$.getJSON('/assets/data/maindata.json', function(bpds) {
  let mainProductCard = ''; // 建议初始化变量，避免意外拼接内容
  bpds.forEach((data) => {
    mainProductCard += '<div class="Qlty"><button value="'+ data.customFields[0].value +'">Ordinary</button><button value="'+ data.customFields[1].value +'">Premium</button></div>'
  });
  $('#mainDiv').append(mainProductCard);
});

// 用事件委托绑定点击事件
$('#mainDiv').on('click', '.Qlty button', function() {
  alert("alert working");
});

方案2：元素生成后再绑定事件 #

把点击事件的绑定代码放到getJSON的回调函数里，等元素被添加到页面后再执行绑定：

$.getJSON('/assets/data/maindata.json', function(bpds) {
  let mainProductCard = '';
  bpds.forEach((data) => {
    mainProductCard += '<div class="Qlty"><button value="'+ data.customFields[0].value +'">Ordinary</button><button value="'+ data.customFields[1].value +'">Premium</button></div>'
  });
  $('#mainDiv').append(mainProductCard);
  
  // 元素添加完成后再绑定事件
  $(".Qlty button").click(function() {
    alert("alert working");
  });
});

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