提问人：Vladyslav 提问时间：11/6/2023 最后编辑：Heretic MonkeyVladyslav 更新时间：11/7/2023 访问量：57
为什么 DotNetNuke 意外地替换了我的 DOM 元素
Why does DotNetNuke unexpectedly replace my DOM elements
问：
我正在开发一个 9.13 DotNetNuke 自定义模块，在我的一个设置页面上有一个自定义输入字段，用于将文件上传到我的 API 控制器，但是每当我尝试向服务器发出任何 ajax 请求时，DNN 都会自动替换我的文件输入字段样式，因此它会创建一个带有类的跨度，并覆盖我的原始输入字段。此外，它还删除事件处理程序。这是我的 DOM 在 ajax 请求之前的样子：dnnInputFileWrapper
<div class="btn btn-primary btn-file" tabindex="500">
<i class="bi-folder2-open"></i>
<span class="hidden-xs">Browse …</span>
<input id="my-input" type="file" multiple="">
</div>
之后：
<div class="btn btn-primary btn-file" tabindex="500">
<i class="bi-folder2-open"></i>
<span class="hidden-xs">Browse …</span>
<span class="dnnInputFileWrapper dnnSecondaryAction">Choose File
<input id="my-input" type="file" multiple="">
</span>
</div>
用户界面如下所示：
我试图覆盖默认的DotNetNuke CSS类，它工作正常，直到我遇到删除的事件处理程序的问题
答：
1赞
Vladyslav
11/7/2023
#1
我找到了答案。如果您遇到问题，您应该将该类添加到您的输入字段中。normalFileUploadtype="file"
在检查了DotNetNuke dnn.jquery.js文件后，我发现了处理包装功能的函数和允许我们避免这种行为的代码行，它看起来像这样：
(function ($) {
$.fn.dnnFileInput = function (options) {
var opts = $.extend({}, $.fn.dnnFileInput.defaultOptions, options);
return this.each(function () {
var $ctrl = $(this);
if ($ctrl.hasClass('normalFileUpload')) return;
if (this.wrapper)
return;
//ignore decoration for elements in rad control.
if ($ctrl.parents().hasClass("RadUpload"))
return;
// if this.wrapper is undefined, then we check if parent node is a wrapper
if (this.parentNode && this.parentNode.tagName.toLowerCase() == 'span' && $ctrl.parent().hasClass('dnnInputFileWrapper')) {
return;
}
this.wrapper = $("<span class='dnnInputFileWrapper " + opts.buttonClass + "'></span>");
var text = $ctrl.data('text');
text = text || 'Choose File';
this.wrapper.text(text);
$ctrl.wrap(this.wrapper);
$ctrl.data("wrapper", $ctrl.parent());
if (opts.showSelectedFileNameAsButtonText) {
$ctrl.change(function () {
var val = $(this).val();
if (val != '') {
var lastIdx = val.lastIndexOf('\\') + 1;
val = val.substring(lastIdx, val.length);
} else {
val = text;
}
$(this).data("wrapper").get(0).childNodes[0].nodeValue = val;
});
}
});
};
$.fn.dnnFileInput.defaultOptions = {
buttonClass: 'dnnSecondaryAction',
showSelectedFileNameAsButtonText: true
};
})(jQuery);
至少它适用于 DNN 版本 9.13
评论