多文件上传控件动态生成失效求助：仅初始控件可正常使用

嘿，我帮你找出问题所在啦！你遇到的点击Add按钮生成的新文件选择控件没反应、只有第一个能用的情况，主要是代码里的选择器错误和上下文处理不当导致的，我给你整理了修正方案，一起来看看：

问题根源 #

• 选择器写错啦：你在change事件处理里用了$("chooseFile")、$("file-upload")这些写法——类选择器必须加上.前缀啊！不然jQuery会把它们当成HTML标签找，自然找不到新生成的元素，导致控件状态更新失效。
• 全局选择器坑人：清空按钮的逻辑里，你用$('.chooseFile')会选中所有文件控件，点清空的时候所有控件都会被重置，这肯定不是你想要的；而且动态添加元素时，直接复制HTML没有重置状态，新控件会继承原始控件的选中状态。

修正后的完整代码 #

HTML部分（保持不变） #

<button type="button" id="bAddImage"> Add </button>
<div class="m-t-15" id="row-file">
  <div class="row-file-upload">
    <div class="col-lg-6 col-md-6 m-t-10 row clearfix">
      <button class="material-icons text-center bClear waves-effect bg-blue-grey">clear</button>
      <div class="file-upload">
        <div class="file-select">
          <div class="file-select-name fileName">Choose File</div>
          <div class="file-select-button">... Choose File</div>
          <input type="file" class="chooseFile">
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript修正版 #

$(document).ready(function () {
  // 清空按钮：只处理当前行的文件控件
  $('body').on('click', '.bClear', function (event) {
    event.preventDefault();
    // 找到当前按钮所在行的文件控件
    var $currentFileInput = $(this).closest('.col-lg-6').find('.chooseFile');
    // 重置当前控件
    $currentFileInput.wrap('<form>').closest('form').get(0).reset();
    $currentFileInput.unwrap();
    // 触发change事件更新显示文本
    $currentFileInput.trigger('change');
  });

  // 文件选择事件：只更新当前控件对应的显示区域
  $('body').on('change', '.chooseFile', function () {
    var $this = $(this);
    var filename = $this.val();
    // 定位当前控件对应的显示元素
    var $fileNameDisplay = $this.closest('.file-select').find('.fileName');
    var $fileUploadContainer = $this.closest('.file-upload');

    if (/^\s*$/.test(filename)) {
      $fileUploadContainer.removeClass('active');
      $fileNameDisplay.text("فایل انتخاب نشده");
    } else {
      $fileUploadContainer.addClass('active');
      // 去掉浏览器默认的 fakepath 前缀
      filename = filename.replace("C:\\fakepath\\", "");
      // 文件名过长时截断显示
      if (filename.length > 30) {
        filename = filename.substring(0, 30) + '...';
      }
      $fileNameDisplay.text(filename);
    }
  });

  // 添加新的文件上传控件
  $('body').on('click', '#bAddImage', function () {
    // 克隆原始的上传控件容器（用first()确保只克隆第一个模板）
    var $newUploadRow = $('.row-file-upload').first().clone();
    // 重置克隆控件的状态：清空选中文件、恢复默认文本和样式
    var $newFileInput = $newUploadRow.find('.chooseFile');
    $newFileInput.wrap('<form>').closest('form')[0].reset();
    $newFileInput.unwrap();
    $newUploadRow.find('.fileName').text("Choose File");
    $newUploadRow.find('.file-upload').removeClass('active');
    // 把新控件添加到容器里
    $('#row-file').append($newUploadRow);
  });
});

关键修正说明 #

1. 修复选择器：所有类选择器都加上了.前缀，比如$(".chooseFile")，这样jQuery才能正确找到每个控件。
2. 上下文绑定：用$(this)获取当前触发事件的元素，再通过closest()和find()定位到当前元素对应的显示区域，确保每个控件的状态更新只影响自己，不会干扰其他控件。
3. 克隆+重置：不再直接复制HTML，而是用clone()克隆原始模板，克隆后立刻重置控件状态，避免新控件继承原始控件的选中文件和样式。
4. 独立清空：清空按钮只处理当前所在行的文件控件，不会影响其他行的控件，符合单个清空的预期。

这样修改后，你点击Add生成的新文件选择控件就能正常响应点击和选择事件了，每个控件的状态也能独立更新~

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