DotNetNuke 9.13 Ajax请求后DOM元素意外替换问题咨询

问题背景 #

开发DotNetNuke 9.13版本的自定义模块时，设置页面中的自定义文件输入字段，在发起任意Ajax请求后会被DNN自动处理：被带有dnnInputFileWrapper类的span标签包裹，原有样式被覆盖，同时绑定的事件处理器被移除。

请求前DOM结构：

<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>

请求后DOM结构：

<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>

此前仅通过覆盖CSS解决了样式问题，但事件处理器丢失的问题无法解决。

解决方案 #

1. 阻止DNN自动美化指定文件输入 #

DNN的dnn.js默认会对所有type="file"的输入框执行美化逻辑。可以通过以下方式跳过目标元素的处理：

• 添加标记类并修改处理逻辑
  给目标文件输入添加自定义类：

  <input id="my-input" type="file" multiple="" class="skip-dnn-file-beautify">
  

  在模块的自定义JS中（需在dnn.js加载后执行），重写DNN的文件输入处理逻辑：

  $(document).off('ready.dnn').on('ready.dnn', function() {
      // 仅处理未标记跳过的文件输入
      $('input[type="file"]:not(.skip-dnn-file-beautify)').each(function() {
          if (!$(this).closest('.dnnInputFileWrapper').length) {
              // 保留DNN原有美化逻辑，仅排除目标元素
              $(this).wrap('<span class="dnnInputFileWrapper dnnSecondaryAction"></span>')
                     .parent().prepend('<span class="dnnInputFileText">' + DotNetNuke.UI.Resources.ScriptsResources.ChooseFile + '</span>');
          }
      });
      // 初始化你的自定义事件
      initMyFileInputEvents();
  });
  

• 全局禁用文件输入美化（仅限独立页面）
  如果模块页面不需要DNN默认的文件输入样式，可直接阻止其初始化：

  $(document).on('ready.dnn', function(e) {
      e.stopImmediatePropagation();
      initMyFileInputEvents();
  });
  

  注意：此方法会影响整个页面的DNN文件输入美化，仅适合模块专属页面使用。

2. 事件委托规避事件丢失 #

使用事件委托绑定事件，将事件绑定到不会被替换的父元素上，即使文件输入被重新渲染，事件依然有效：

// 绑定到父容器.btn-file，监听子元素#my-input的change事件
$('.btn-file').on('change', '#my-input', function(e) {
    // 你的文件选择处理逻辑
    console.log('选中文件:', this.files);
});

这种方式无需担心DOM被修改导致事件丢失，是最通用的解决方案。

3. Ajax请求后恢复DOM并重新绑定事件 #

如果无法阻止DNN的DOM修改，可在每次Ajax请求完成后，手动恢复DOM结构并重新绑定事件：

// 封装DOM恢复函数
function restoreFileInputDOM() {
    const $wrapper = $('#my-input').closest('.dnnInputFileWrapper');
    if ($wrapper.length) {
        // 将文件输入移回原位置，移除DNN添加的包装span
        $('#my-input').insertAfter($wrapper.siblings('.hidden-xs'));
        $wrapper.remove();
    }
}

// 封装事件初始化函数
function initMyFileInputEvents() {
    // 先解绑避免重复绑定
    $('#my-input').off('change').on('change', function(e) {
        // 你的处理逻辑
    });
}

// 在Ajax请求完成后调用
$.ajax({
    url: '/api/your-module/upload',
    type: 'POST',
    // 其他请求配置
    complete: function() {
        restoreFileInputDOM();
        initMyFileInputEvents();
    }
});

总结 #

优先选择事件委托方案，无需修改DNN原有逻辑，兼容性最好；若需要从根源解决DOM篡改问题，可选择阻止DNN自动美化指定元素的方法；如果必须保留DNN其他功能，结合DOM恢复和事件重新绑定也能解决问题。

内容的提问来源于stack exchange，提问作者Vladyslav