如何使用jQuery选择动态添加的元素？解决点击无响应问题

嘿，这个问题我之前也踩过坑！核心原因是你给元素绑定点击事件的时候，那些.room-selector元素还根本不存在于DOM里——它们是登录成功后通过socket回调动态生成的，页面加载时执行的事件绑定代码，根本找不到要绑定的元素，自然点击没反应。

问题拆解 #

你原代码里的这段绑定逻辑：

$('.room-selector').on('click', function(){
    console.log('im clicked');
    var roomName = this.attr("id");
    console.log('selected room is:', roomName);
});

是在页面初始化时就运行了，但这时候.choose-room是隐藏状态，#roomlist里空无一物，没有任何.room-selector元素，所以这个绑定操作等于做了无用功。

另外还有个小细节要注意：this.attr("id")会直接报错，因为this在这里是原生DOM节点，没有jQuery的attr方法，得转成jQuery对象$(this)才行。

两种修复方案 #

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

利用事件冒泡的特性，把事件绑定到已经存在的父元素上（比如初始HTML里就有的#roomlist），让父元素监听子元素的点击事件：

// 绑定到静态存在的父元素#roomlist上，监听子元素.room-selector的点击
$('#roomlist').on('click', '.room-selector', function(){
    console.log('im clicked');
    var roomName = $(this).attr("id"); // 转成jQuery对象再调用attr方法
    console.log('selected room is:', roomName);
});

这种方式的好处是：不管.room-selector是现在还是以后动态添加的，只要它是#roomlist的子元素，点击事件都会被触发，而且只需要绑定一次，性能更优。

方案2：动态生成元素时直接绑定事件

在你创建.room-selector元素的同时，直接给它绑定点击事件：

$.each(rooms, function( index, room ) {
    var li= $('<li></li>');
    // 先创建h4元素并保存到变量
    var roomSelector = $('<h4 class="room-selector" id=' + room + '>'+ room + '</h4>');
    // 直接给当前生成的元素绑定点击事件
    roomSelector.on('click', function(){
        console.log('im clicked');
        var roomName = $(this).attr("id");
        console.log('selected room is:', roomName);
    });
    li.append(roomSelector);
    $('#roomlist').append(li);
});

这种方式适合元素不会频繁动态生成的场景，每次创建元素时绑定事件，逻辑直观易懂。

总结 #

优先选择事件委托的方式，它更灵活高效，也能避免重复绑定事件的问题。同时别忘了把this.attr("id")改成$(this).attr("id")，不然即使事件触发了，也会因为报错看不到预期的日志。

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