运行History.js时点击链接，JavaScript无法渲染仅显示纯文本

看起来你遇到了Ajaxify（基于History.js的无刷新页面加载工具）常见的两个问题：脚本被当作纯文本输出，以及自定义事件绑定失效。我来帮你一步步解决：

1. 为什么JS会变成纯文本？ #

Ajaxify默认只会更新页面的指定内容区域（比如常见的#content容器），如果新页面的脚本是直接写在容器外的<body>里，或者Ajaxify没有配置脚本处理逻辑，这些脚本就会被当成普通HTML文本直接渲染出来。另外你代码里同时引入了jQuery 3.3.1和1.9.1，版本冲突也会加剧这类问题。

修复方案： #

• 移除重复的jQuery引入：删掉旧的1.9.1版本，只保留jQuery 3.3.1，避免版本冲突。
• 通过Ajaxify回调手动处理脚本：
  Ajaxify提供了ajaxify:complete事件，你可以在页面加载完成后提取并执行新内容中的脚本。添加这段代码到你的自定义脚本里：

  $(window).on('ajaxify:complete', function(event, data) {
    // 提取新页面中的所有脚本标签
    const newScripts = $(data.responseHTML).find('script');
    newScripts.each(function() {
      const scriptEl = document.createElement('script');
      scriptEl.type = $(this).attr('type') || 'text/javascript';
      
      if ($(this).attr('src')) {
        // 处理外部脚本
        scriptEl.src = $(this).attr('src');
      } else {
        // 处理内联脚本
        scriptEl.textContent = $(this).text();
      }
      
      document.body.appendChild(scriptEl);
    });
  });
  

2. 登录按钮点击事件失效的问题 #

你用$(document).ready()绑定的#login_btn点击事件，只对页面初始化时存在的元素有效。当Ajaxify动态替换页面内容后，新的#login_btn元素不会继承这个绑定，导致事件失效。

修复方案：使用事件委托 #

把事件绑定到不会被替换的父元素（比如document），这样不管元素什么时候被添加到页面，事件都能触发：

// 替换原来的$("#login_btn").click(...)写法
$(document).on('click', '#login_btn', function(e) {
  e.preventDefault();
  
  $.ajax({
    url: document.location.origin + "/index.php/login",
    type: 'POST',
    contentType: 'application/json', // 注意这里是小写开头的contentType，你之前的拼写错误会导致参数无效
    data: JSON.stringify({ // 指定JSON类型后，需要把数据转为JSON字符串
      'username': $("#login-username").val(),
      'password': $("#login-password").val()
    })
  }).done(function(response){
    if(response == "1") {
      window.History.pushState({urlPath:'/'}, "", '/');
    } else {
      $("#login-form").find(".uk-alert-danger:first").hide();
      $("#login-form").prepend("<div class='uk-alert uk-alert-danger'>Invalid credentials specified.</div>");
    }
  });
});

3. 额外优化建议 #

• 把所有自定义脚本放在Ajaxify脚本之前加载，确保事件委托在页面初始化时就绑定完成；
• 检查Ajaxify的配置，确保它只替换页面的内容区域（比如#main-content），不要替换整个<body>，避免破坏页面的基础脚本和样式；
• 只在主页面加载一次全局依赖（比如jQuery、History.js），不要在Ajax加载的页面中重复引入。

内容的提问来源于stack exchange，提问作者P. Nick