jQuery on change 在输入文件元素上触发两次

Question

我在输入 2 个文件时遇到问题：

<span class="btn btn-info btn-file" id="a">
    Selecteer afbeeldingen

    <input accept="image/gif,image/jpeg,image/png" multiple="multiple" id="btn-file-images" name="media[]" type="file">
</span>

<span class="btn btn-info btn-file" id="b">
    Selecteer media
    <input accept=".csv,application/vnd.ms-excel,application/msword,application/pdf,application/x-rar-compressed,application/zip,image/vnd.adobe.photoshop,application/illustrator" multiple="multiple" id="btn-file-media" name="media[]" type="file">
</span>

使用 jQuery，我在 .btn 文件输入上放置了一个事件监听器

var uploadTab = $('#upload')
, tabForms = $('.tab-pane form', uploadTab)
, fileInputHandler = function fileInputHandler () {
    var input = $(this)
      , numFiles = input.get(0).files ? input.get(0).files.length : 1
      , label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

     handleFiles(this, this.files);
}

tabForms.on('change', '.btn-file input', fileInputHandler);

问题在于，一页上有 2 个 .btn 文件类，它会触发该函数两次。我试图将事件分别放在 ID 的“a”和“b”上，但没有运气。当我注释掉其中一个输入时它工作正常，它会触发一次。

我也更改了其中一个的 name 属性，但也没有运气。

还有一个关于stackoverflow的话题值得一试，因为我很绝望，但也没有用。

jQuery change event fired twice when giving focus to another control inside the change callback

Answer 1

似乎 javascript 文件被包含了两次