Jquery .clone()方法不能在IE和Chrome浏览器中工作

Jquery .clone() method does not work in IE and Chrome Browser

本文关键字:Chrome 浏览器 工作 IE clone 方法 不能 Jquery      更新时间:2023-09-26

我想克隆一个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();
                        });
                }
            });
        }
    }
}

和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浏览器中不工作。这里的问题是jquery的.clone()方法。这可能吗?谢谢。

您正在用下划线分配id,这就是为什么不工作。使用两个反斜杠转义元字符。如$("#your''_id")

点击这里查看更多信息