请教一个简单的JQuery问题

解答思路

$(".t1") 这类选择器的作用是“在调用的那一刻”找到当前 DOM 中所有匹配的元素，并把事件直接绑定在这些具体的 DOM 节点上；后续再修改 class 或新增符合 .t1 的元素，都不会自动补上这个事件，因为绑定动作早已完成。要让动态元素也能响应事件，需要使用事件委托的写法。

示例代码

// 直接绑定：只对调用时已存在的 .t1 元素生效
$(".t1").on("click", function () {
  // ...
});

// 事件委托：绑定在稳定存在的父级元素上，动态元素同样生效
$(document).on("click", ".t1", function (e) {
  // e.target / this 就是实际被点击、且匹配 .t1 的元素
});

详细说明

• $(".t1") 的参数是一个选择器字符串，返回值是当前时刻匹配到的 DOM 元素集合；.on("click", fn) 是把 fn 直接绑定在这些具体的元素上。
• 之后如果修改某个元素的 class 让它变成 .t1，或者新建一个带 .t1 的元素并插入页面，这些元素在事件绑定发生时并不存在（或不匹配），因此不会拥有这个 click 事件，就好像新增了一个 .t1 元素但从未对它调用过 .on() 一样。
• jQuery 提供的事件委托写法 $(parent).on("click", "selector", handler)，本质是把事件绑定在稳定存在的父级元素（如 document 或某个容器）上，利用事件冒泡机制，在事件触发时通过 e.target 动态判断触发源是否匹配传入的选择器，从而实现“未来新增的元素也能响应事件”的动态效果。

小结

直接绑定的事件只对绑定时已存在的元素生效，动态新增或改变 class 得到的元素不会自动拥有该事件；如果需要让动态元素也能响应事件，应该使用 jQuery 的事件委托写法，把事件绑定在父级容器上并通过选择器动态匹配。