动态加载子页面与专属JS时event.preventDefault()失效问题排查

问题原因 #

• innerHTML不执行外部脚本：当通过innerHTML将包含<script src="...">的HTML插入DOM时，浏览器不会自动加载并执行该外部脚本文件，这是innerHTML的安全限制特性，仅解析DOM元素，不处理脚本的资源加载。
• $(document).ready已触发：页面初始加载完成后，$(document).ready事件就已经执行完毕。动态加载script.js时，这个事件不会再次触发，导致脚本内部的事件委托代码从未运行，表单提交时没有绑定阻止默认行为的逻辑，因此传统提交流程会被触发。

解决办法 #

办法1：修改加载函数，手动提取并执行外部脚本 #

在将HTML插入页面后，主动提取其中的script标签，通过创建新的script元素来加载并执行脚本：

function loadPage(page) {
  const pageLoadingSpinner = new LoadingSpinner('loading-spinner');
  pageLoadingSpinner.show();

  fetch(page, {
      headers: {
          'X-Requested-With': 'XMLHttpRequest'
      }
  })
  .then(response => response.text())
  .then(html => {
    setTimeout(() => {
      const mainContent = document.getElementById('main-content');
      mainContent.innerHTML = html;
      
      // 提取并加载外部脚本
      const scriptTags = mainContent.querySelectorAll('script[src]');
      scriptTags.forEach(tag => {
        const scriptUrl = tag.src;
        // 避免重复加载脚本
        if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
          const newScript = document.createElement('script');
          newScript.src = scriptUrl;
          document.body.appendChild(newScript);
        }
        tag.remove(); // 移除原页面中的script标签
      });

      pageLoadingSpinner.hide();
    }, 200);
  })
  .catch(error => {
      console.error('Error:', error);
      pageLoadingSpinner.hide();
  });
}

办法2：优化脚本代码，移除$(document).ready包裹 #

由于事件委托是绑定在document上的，无需等待$(document).ready（该事件仅在页面初始加载完成时触发一次），直接将事件委托代码暴露在全局作用域：

// 移除$(document).ready，直接绑定事件委托
$(document).on('submit', '#myForm', function(event) {
  event.preventDefault();
  submitForm(event);
});

function submitForm(event) {
  // 你的AJAX提交逻辑
}

办法3：分离HTML与脚本的后端返回方案 #

让后端返回JSON格式数据，将页面HTML和脚本URL分开，前端分别处理DOM插入和脚本加载，更易维护：

后端返回示例（JSON）：

{
  "html": "<form id='myForm'>...</form>",
  "scriptUrl": "/static/script.js"
}

修改后的前端加载函数：

function loadPage(page) {
  const pageLoadingSpinner = new LoadingSpinner('loading-spinner');
  pageLoadingSpinner.show();

  fetch(page, {
      headers: {
          'X-Requested-With': 'XMLHttpRequest'
      }
  })
  .then(response => response.json())
  .then(data => {
    setTimeout(() => {
      document.getElementById('main-content').innerHTML = data.html;
      
      // 加载脚本（避免重复加载）
      if (!document.querySelector(`script[src="${data.scriptUrl}"]`)) {
        const script = document.createElement('script');
        script.src = data.scriptUrl;
        document.body.appendChild(script);
      }

      pageLoadingSpinner.hide();
    }, 200);
  })
  .catch(error => {
      console.error('Error:', error);
      pageLoadingSpinner.hide();
  });
}

额外注意点 #

• 重复加载脚本会导致事件委托多次绑定，触发时执行多次逻辑，因此加载前务必检查脚本是否已存在。
• 如果使用jQuery，可直接用$.getScript(url)替代手动创建script元素，简化代码：

  $.getScript(scriptUrl);
  

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