Javascript Jquery.clone（）方法在IE和Chrome浏览器中不起作用

我想克隆一个html控件，然后附加到另一个控件

我已经写了代码

    ko.bindingHandlers.multiFileUpload = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {


        var options = ko.utils.unwrapObservable(valueAccessor()),
            controlId = ko.utils.unwrapObservable(options.controlId);
        //primaryKey = ko.utils.unwrapObservable(options.primaryKey);

        var progressMonitorID = controlId + '-ProgressMonitor';
        var progressIndicatorID = controlId + '-ProgressIndicator';

        $(element).after('<div id=' + progressMonitorID + ' class="progress progress-striped active">'
                            + '<div id=' + progressIndicatorID + ' class="bar" style="width: 0%;"></div>'
                            //+ '<input type="hidden" id="imageKey_"' + controlId + '  name="imageKey" value=' + primaryKey + '></div>'
                       + '</div>');

        $('#' + progressMonitorID).hide();
        $('#' + progressIndicatorID).hide();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor()),
            imageKey = ko.utils.unwrapObservable(options.imageKey),
            imageForeighKey01 = ko.utils.unwrapObservable(options.imageForeighKey01),
            uploadUrl = ko.utils.unwrapObservable(options.uploadUrl),
            controlId = ko.utils.unwrapObservable(options.controlId),
            refreshUri = ko.utils.unwrapObservable(options.refresh),
            formName = ko.utils.unwrapObservable(options.formName);


        var progressMonitorID = controlId + '-ProgressMonitor';
        var progressIndicatorID = controlId + '-ProgressIndicator';

        var formID = controlId + '-form';
        var fileInputID = controlId + '-fileInput';

        if (uploadUrl) {
            $(element).change(function () {
                if (element.files.length) {
                    var $this = $(this),
                        fileName = $this.val();

                    // var formData = new FormData($('#' + formName)[0]);

                    var $form = $('<form enctype="multipart/form-data" id=' + formID + '></form>');
                    // $form.append('<input id=' + fileInputID + 'name=' + fileInputID + ' type="file" />');

                    $form.append('<input type="hidden" id="imageKey_"' + controlId + '  name="imageKey" value=' + imageKey + '>');
                    $form.append('<input type="hidden" id="imageForeignKey_"' + controlId + '  name="imageForeighKey01" value=' + imageForeighKey01 + '>');
                    $("#" + controlId).clone().appendTo($form);
                    $form.hide();
                    $('body').append($form);

                    var formData = new FormData($($form)[0]);

                    $.ajax({
                        url: uploadUrl,
                        type: 'POST',
                        // Form data
                        data: formData,
                        //Options to tell JQuery not to process data or worry about content-type
                        cache: false,
                        contentType: false, //'multipart/form-data',
                        processData: false,
                        xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            //Upload progress
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total * 100 + "%";
                                    //Do something with upload progress
                                    $('#' + progressMonitorID).show();
                                    $('#' + progressIndicatorID).width(percentComplete);
                                    //alert(percentComplete);
                                }
                            }, false);
                            return xhr;
                        }
                    })
                        .done(function (data, textStatus, jqXHR) {
                            if (refreshUri) {
                                //alert("success"); 
                                //var path = '../MapView/DownloadMap?ref=' + Math.random();
                                var path = refreshUri + 'ref=' + Math.random();
                                options.refresh(path);
                            }
                        })
                        .fail(function (jqxhr, status, errorMsg) { alert("Status : " + status + " Error :" + errorMsg); })
                        .always(function () {
                            // alert("complete");
                            $('#' + progressMonitorID).hide();
                            $('#' + progressIndicatorID).hide();
                            $('#' + formID).remove();
                        });
                }
            });
        }
    }
}

ko.bindingHandlers.multiFileUpload={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var options=ko.utils.unwrapObservable（valueAccessor（）），
controlId=ko.utils.unwrapobbservable（options.controlId）；
//primaryKey=ko.utils.unwrapobbservable（options.primaryKey）；
var progressMonitorID=controlId+'-ProgressMonitor'；
var ProgressIndicator D=controlId+'-ProgressIndicator'；
$（元素）。在（“”）之后
+ ''
//+ ''
+ '');
$（'#'+progressMonitorID）.hide（）；
$（'#'+ProgressIndicator.hide（）；
},
更新：函数（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var options=ko.utils.unwrapObservable（valueAccessor（）），
imageKey=ko.utils.unwrapobbservable（options.imageKey），
imageForeighKey01=ko.utils.unwrapobbservable（options.imageForeighKey01），
uploadUrl=ko.utils.unwrapObservable（options.uploadUrl），
controlId=ko.utils.unwrapObservable（options.controlId），
refreshUri=ko.utils.unwrapObservable（options.refresh），
formName=ko.utils.unwrapObservable（options.formName）；
var progressMonitorID=controlId+'-ProgressMonitor'；
var ProgressIndicator D=controlId+'-ProgressIndicator'；
var formID=controlId+'-form'；
var fileInputID=controlId+'-fileInput'；
如果（上传URL）{
$（元素）.更改（函数（）{
if（element.files.length）{
变量$this=$（this），
fileName=$this.val（）；
//var formData=new formData（$（'#'+formName）[0]）；
变量$form=$（''）；
//$form.append（“”）；
$form.append（“”）；
$form.append（“”）；
$（“#”+controlId）.clone（）.appendTo（$form）；
$form.hide（）；
$（'body'）。追加（$form）；
var formData=新的formData（$（$form）[0]）；
$.ajax({
url：上传url，
键入：“POST”，
//表单数据
数据：formData，
//告诉JQuery不要处理数据或担心内容类型的选项
cache:false，
contentType:false，//“多部分/表单数据”，
processData:false，
xhr：函数（）{
var xhr=new window.XMLHttpRequest（）；
//上传进度
xhr.upload.addEventListener（“进度”，函数（evt）{
if（evt.长度可计算）{
var percentComplete=evt.loaded/evt.total*100+“%”；
//对上传进度做些什么
$（'#'+progressMonitorID）.show（）；
$（“#”+进度指示符）。宽度（完成百分比）；
//警报（完成百分比）；
}
}，假）；
返回xhr；
}
})
.done（函数（数据、文本状态、jqXHR）{
如果（刷新URI）{
//警惕（“成功”）；
//var path='../MapView/DownloadMap？ref='+Math.random（）；
var path=refreshUri+'ref='+Math.random（）；
选项。刷新（路径）；
}
})
.fail（函数（jqxhr，status，errorMsg）{alert（“status:+status+”Error:+errorMsg）；}）
.always（函数（）{
//警报（“完成”）；
$（'#'+progressMonitorID）.hide（）；
$（'#'+ProgressIndicator.hide（）；
$（'#'+formID）.remove（）；
});
}
});
}
}
}

html绑定是

<input type="file" tabindex="9"
                                data-bind="attr: {
    id: 'RoadMap' + $index(), name: 'RoadMap' + $index()
},
    multiFileUpload: {
        controlId: 'RoadMap' + $index(),
        formName: 'frmPage3a',
        imageKey: StageDetailID,
        imageForeighKey01: CourseInfoRoadID,
        uploadUrl: '/api/Image/UploadMapFile'
    }
" />

这段代码在FireFox浏览器中运行良好，但在IE和Chrome中不起作用。

---

可能吗？谢谢。

您正在为id分配下划线，这就是为什么不工作的原因。使用两个反斜杠转义元字符。比如

$（“#你的\\\u id”）

---

我想知道为什么它在FF上工作，因为不存在id为“controlId”的元素。它是imageKey_“'+controlId+”或imageForeignKey_“'+controlId+”谢谢您的评论。我已经提到了我的全部代码。