脚本动态生成的Div元素点击时仅能获取首个ID的问题求助

嘿，这个问题我之前也踩过坑！本质原因是动态生成的DOM元素没有被正确绑定点击事件——如果是页面加载完成后用普通的$('div').click()绑定事件，只会对当时已经存在于页面里的元素生效，后续通过脚本新增的元素根本没带上这个事件绑定，所以就只有第一个能触发啦。

下面给你两种靠谱的解决思路：

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

利用JS的事件冒泡机制，把点击事件绑定到一个原本就存在的父元素上（比如页面固定的容器，实在不行用document也可以，但尽量选更具体的父元素，性能更好），然后指定触发事件的子元素选择器。这样不管后续新增多少动态Div，只要匹配选择器，点击都会触发事件。

举个例子：

$(document).ready(function () {
  // 先把事件委托绑定到固定的父容器（比如#room-container，你实际用来放房间Div的容器）
  $('#room-container').on('click', '.room-div', function() {
    // 这里的this就是当前被点击的Div，直接拿ID就行
    const clickedId = $(this).attr('id');
    console.log('你点击的Div ID是：', clickedId);
  });

  // 你的动态创建Div代码
  $.getJSON("/users/12", function (data) {
    var socket = new SockJS('/ws-chat');
    stompClient = Stomp.over(socket);
    $.each(data.rooms, function (i, room) {
      // 创建带ID和类的Div
      const $roomDiv = $('<div>', {
        id: `room-${room.id}`, // 比如生成room-1、room-2这样的ID
        class: 'room-div', // 给个类方便事件委托筛选
        text: room.name // 比如显示房间名
      });
      // 把Div加到父容器里
      $('#room-container').append($roomDiv);
    });
  });
});

方法2：创建元素时直接绑定事件 #

如果你的动态创建逻辑比较简单，也可以在生成每个Div的时候，直接给它绑定点击事件。这种方式直观，但如果创建的元素很多，代码会有点冗余。

示例代码：

$(document).ready(function () {
  $.getJSON("/users/12", function (data) {
    var socket = new SockJS('/ws-chat');
    stompClient = Stomp.over(socket);
    $.each(data.rooms, function (i, room) {
      const $roomDiv = $('<div>', {
        id: `room-${room.id}`,
        text: room.name
      });
      // 直接给当前创建的Div绑定点击事件
      $roomDiv.click(function() {
        const clickedId = $(this).attr('id');
        console.log('你点击的Div ID是：', clickedId);
      });
      // 加到页面容器
      $('#room-container').append($roomDiv);
    });
  });
});

小提醒 #

如果你之前是循环绑定事件时出现了“所有点击都返回最后一个Div的ID”，那是闭包的坑！方法1的事件委托天然避开了这个问题，方法2里用$(this)也能准确拿到当前点击的元素，不用担心变量污染~

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