如何在jQuery事件委托中操作触发事件的'this'元素

首先，我注意到你的HTML代码存在未闭合的<tr>标签，这会导致浏览器解析DOM时结构错乱，进而影响后续的DOM选择逻辑，这很可能是$(this)没有正确指向触发事件的input元素的核心原因。

第一步：修正HTML结构 #

你的原始HTML中，前两个<tr>标签都没有闭合，浏览器会自动补全，但会生成不符合预期的DOM结构。修正后的HTML应该是：

<tbody class="gal_picture_fields">
  <tr class="nested-fields">
    <td>
      <input type="file">
    </td>
    <td class="thumb">
    </td>
  </tr> <!-- 补全闭合标签 -->
  <tr class="nested-fields">
    <td>
      <input type="file">
    </td>
    <td class="thumb">
    </td>
  </tr> <!-- 补全闭合标签 -->
  <tr class="nested-fields">
    <td>
      <input type="file">
    </td>
    <td class="thumb">
    </td>
  </tr>
</tbody>

第二步：验证并优化JavaScript事件委托逻辑 #

你的事件委托代码本身逻辑方向是对的，$(this)在事件处理函数中理应指向触发change事件的那个input[type=file]元素。不过可以做一些优化，让逻辑更严谨、鲁棒性更强：

function editPicPreview() {
  // 先移除已存在的事件绑定，避免重复调用函数导致多次绑定
  $(".gal_picture_fields").off('change', '.nested-fields td input[type=file]');
  
  $(".gal_picture_fields").on('change', '.nested-fields td input[type=file]', function(e) {
    const file = e.target.files[0];
    if (!file) return; // 没有选择文件时直接返回，避免后续报错
    
    const url = URL.createObjectURL(file);
    // 用更可靠的方式找到当前input对应的预览容器
    const thumbContainer = $(this).closest('tr').find('.thumb');
    
    const img = new Image();
    img.onload = function() {
      if (this.naturalHeight < 200) {
        URL.revokeObjectURL(url); // 释放不必要的URL对象，避免内存泄漏
        return;
      }
      const ratio = this.naturalWidth / this.naturalHeight;
      const newHeight = 200;
      const newWidth = ratio * newHeight;
      this.width = newWidth;
      this.height = newHeight;
      thumbContainer.empty().append(this); // 先清空容器再添加，避免重复预览多张图
    };
    img.onerror = function() {
      URL.revokeObjectURL(url); // 加载失败时也要释放URL
      alert('图片加载失败，请选择有效的图片文件');
    };
    img.src = url;
  });
};

关键优化说明： #

1. 避免重复绑定：添加.off()先移除旧的事件绑定，防止editPicPreview被多次调用时，同一个事件触发多次逻辑执行。
2. 更稳定的容器选择：用$(this).closest('tr').find('.thumb')代替siblings('.thumb')，即使TD的结构有调整，也能准确找到当前行对应的预览容器。
3. 内存泄漏防护：在图片加载完成或失败时，调用URL.revokeObjectURL(url)释放创建的对象URL，避免长期占用内存。
4. 边界情况处理：增加文件存在性判断、图片加载失败的处理，提升代码的容错性。

为什么之前$(this)指向看起来异常？ #

因为未闭合的<tr>标签让浏览器解析出的DOM结构完全不符合预期——所有input元素可能都被嵌套在同一个<tr>下，导致closest('td').siblings('.thumb')总是找到第一个.thumb容器，看起来像是$(this)指向了第一个input，但实际是DOM结构错乱引发的选择错误。

修正HTML结构后，再配合优化后的JavaScript代码，就能确保每次触发事件时，$(this)准确指向当前操作的input元素，预览图片也会插入到对应的.thumb容器中。

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