Javascript Firefox中未绑定“附加文件”链接的单击事件

到目前为止，在Linux、OSX和windows上的Chrome浏览器以及windows上的IE浏览器中，上传都可以正常工作，但在所有操作系统的Firefox中都无法正常工作

问题似乎是没有任何事件被绑定到附加文件链接，这在使用Allan Jardine的可视事件插件时可以看到

然而，在在线演示中，可以使用插件查看绑定到click事件的事件

你知道firefox为什么会在这种情况下失败吗

<form action="/notes" class="new_note" data-remote="true" id="new_note" method="post">
  <h3>Create Note</h3>
  <textarea cols="40" id="note_content" name="note[content]" rows="1"></textarea>
  <table>
    <tr>
      <td id='attachments'>
        <a href="#" id="attach-files" style="display:none">Add Attachment</a>
        <a href="#" id="upload-files" style="display:none">Upload Files</a>
      </td>
      <td id='button'>
        <input class="button button-green" disabled="disabled" id="note_submit" name="commit" type="submit" value="Post Note" />
      </td>
    </tr>
  </table>
</form>

创建注释

javascript

bind_plupload: function(url) {
  // plupload setup
  var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight',
    browse_button : 'attach-files',
    container : 'attachments',
    max_file_size : '2mb',
    url : url,
    multipart: true,   
    flash_swf_url : '/javascripts/plugins/plupload/plupload.flash.swf',
    silverlight_xap_url : '/javascripts/plugins/plupload/plupload.silverlight.xap',
    filters : [
      {title : "Images", extensions : "jpg,gif,png"},
      {title : "Documents", extensions : "pdf,doc,docx,odt,txt,xls"}
    ]
  });

  // push files to server after file is selected
  if ($.browser.msie) {
    $("#upload-files").show().click(function() {
      uploader.start();
      return false;
    });
  }
  else {
    $("#upload-files").remove()
    $(":file").live("change", function(e) {
      uploader.start();
    });
  }

  uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
      var msg = sprintf("<div id=\"%s\">%s <b></b></div>", file.id, file.name);
      $('#attachments').append(msg);
    });
    up.refresh(); // Reposition Flash/Silverlight
  });

  uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
  });

  uploader.bind('Error', function(up, err) {
    var msg = sprintf("<div>%s%s</div>", err.message, (err.file ? " "+err.file.name : ""))
    $('#attachments').append(msg);
    up.refresh(); // Reposition Flash/Silverlight
  });

  uploader.bind('FileUploaded', function(up, file) {
    $('#' + file.id + " b").html("100%");
  });

  uploader.init();
} // bind plupload

bind\u plupload:function（url）{
//多功能安装
var uploader=新的plupload.uploader({
运行时：“html5、flash、silverlight”，
浏览按钮：“附加文件”，
容器：“附件”，
最大文件大小：“2mb”，
url:url，
多部分：正确，
flash_swf_url:“/javascripts/plugins/plupload/plupload.flash.swf”，
silverlight_xap_url:“/javascripts/plugins/plupload/plupload.silverlight.xap”，
过滤器：[
{标题：“图像”，扩展名：“jpg，gif，png”}，
{标题：“文档”，扩展名：“pdf、doc、docx、odt、txt、xls”}
]
});
//选择文件后将文件推送到服务器
如果（$.browser.msie）{
$（“#上载文件”）.show（）。单击（函数（））{
uploader.start（）；
返回false；
});
}
否则{
$（“#上载文件”）.remove（）
$（“：file”）.live（“更改”，函数（e）{
uploader.start（）；
});
}
uploader.bind（'FilesAdded'，函数（up，files）{
$.each（文件、函数（i、文件）{
var msg=sprintf（“%s”，file.id，file.name）；
$（'附件'）.append（msg）；
});
up.refresh（）；//重新定位Flash/Silverlight
});
uploader.bind（'UploadProgress'，函数（up，file）{
$（'#'+file.id+“b”）.html（file.percent+“%”）；
});
uploader.bind（'Error'，函数（up，err）{
var msg=sprintf（“%s%s”，err.message，（err.file？”“+err.file.name:”）
$（'附件'）.append（msg）；
up.refresh（）；//重新定位Flash/Silverlight
});
uploader.bind（'fileupload'，函数（up，file）{
$（'#'+file.id+“b”）.html（“100%”）；
});
uploader.init（）；
}//绑定多线程

ID不应包含连字符

尝试将ID更改为

附加\u文件

，

上载\u文件

，等等，然后查看是否有效

---

别客气。（请参阅注释。）

在Firefox中，当“附件”id从元素移动到新嵌套的标记时，一切正常

<td>
    <div id='attachments'>
        <a href="#" id="attach-files" style="display:none">Add Attachment</a>
        <a href="#" id="upload-files" style="display:none">Upload Files</a>
    </div>
</td>

---

我想这会被认为是一个bug。

对此我不太确定。虽然我花了很长时间试图让它工作，但我还是尝试了一下，结果没有成功。没错。这是几年前在一个项目中提出的，一些参考资料（但愿我能找到！）告诉我ID只能包含字母数字和下划线。我的猜测是，这是对

document.idname

糟糕的旧时代的回溯，在那里连字符的idname显然不起作用。