动态列表点击事件异常：点击单一项触发所有项数据弹窗

我一眼就看出问题所在啦——你每次循环都给整个#dynamicTable绑定click事件，这就导致每生成一个项，就多了一个事件监听。当你点击任意项时，所有之前绑定的事件都会挨个触发，自然就弹出所有数据了😅

问题根源 #

你的代码里，$("#dynamicTable").append(...).click(...)这行是在每次循环中给父元素#dynamicTable绑定一次click事件。循环多少次，就会有多少个相同的事件监听绑定在父元素上，点击时所有事件都会依次执行。

解决方案（推荐事件委托，性能最优） #

事件委托利用DOM事件冒泡的特性，只给父元素绑定一次事件，就能处理所有子元素的点击，而且动态生成的元素也能生效，还能减少DOM操作次数。

修改后的代码如下：

$(document).ready(function() {
  // 先给父元素绑定事件委托，监听子元素的点击
  $("#dynamicTable").on('click', '.aktivniItem', function() {
    // 从当前点击的td元素的data属性中获取href值
    const targetHref = $(this).data('href');
    alert(targetHref);
  });

  $.ajax({
    url: 'http://some.some',
    dataType: "json",
    success: function(data){
      // 先拼接所有HTML内容，减少DOM操作次数
      let tableContent = '<tr><th><h5 style="margin-left: 15px; margin-top: 15px;">Events</h5></th></tr>';
      
      $.each(data.videos, function(key, value){
        // 把需要传递的href值存在td的data-href属性里
        tableContent += `
          <table>
            <tr>
              <td class="aktivniItem backgroundIdKlupa_izbornik_td" style="color: white" data-href="${value.href}">
                ${moment(value.time).format('DD-MM-YYYY HH:mm:ss')}
              </td>
            </tr>
          </table>
        `;
      });

      // 一次性把所有内容追加到表格中
      $("#dynamicTable").append(tableContent);
    }
  });
});

另一种方案：给每个子元素单独绑定事件 #

如果数据量不大，也可以直接给每个生成的<td>元素绑定click事件，这样每个元素的事件都是独立的，不会互相干扰：

$(document).ready(function() {
  $.ajax({
    url: 'http://some.some',
    dataType: "json",
    success: function(data){
      $("#dynamicTable").append('<tr><th><h5 style="margin-left: 15px; margin-top: 15px;">Events</h5></th></tr>');
      
      $.each(data.videos, function(key, value){
        // 创建当前项的td元素
        const $itemTd = $(`
          <td class="aktivniItem backgroundIdKlupa_izbornik_td" style="color: white">
            ${moment(value.time).format('DD-MM-YYYY HH:mm:ss')}
          </td>
        `);
        
        // 直接给这个td绑定click事件，此时value是当前循环的项，不会混淆
        $itemTd.click(function() {
          alert(value.href);
        });
        
        // 把td包装进table和tr，再追加到父表格
        $("#dynamicTable").append($('<table><tr></tr></table>').find('tr').append($itemTd));
      });
    }
  });
});

为什么这两种方法能解决问题？ #

1. 事件委托：只绑定一次事件，通过选择器.aktivniItem过滤点击目标，确保只有点击到对应的项才触发逻辑，不会重复绑定事件。
2. 单独绑定：每个<td>元素的click事件都是独立的，绑定的是当前循环的value，点击时只会触发当前元素的事件。

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