SUI Mobile 异步 AJAX 加载页面执行 JavaScript 脚本

Question

SUI Mobile 是一个比较好用的移动端开发框架，里面包含了很多个组件，几乎涵盖了手机端的基本特效，其自带的 路由 功能简直用起来不要太爽，这也是我一直使用它的原因。

不过再好的插件也有一些 缺点，或者说这并不是 SUI Mobile 的缺点，只是框架的约定和我们以往编写代码的方式有点不同，其实你能想到的问题，框架的作者也基本想到了，可能在开发文档里面没有写明。

SUI Mobile 的路由功能，能够在当前页面 异步加载 另外的页面，不需要我们做任何配置，框架给我们自动完成，只要两个页面都遵循框架的格式编写，那就基本没有问题。

这里就会遇到一个经常遇到的问题，那就是异步加载的 JS 会不执行，其实这个问题早在 SUI Mobile 的常见问题里面提到，作者也给出了相应的解决方法，但是可能很多开发者不知道到底该怎么写。

切换到的新页面中的 js 不执行

由于浏览器安全性考虑的限制以及可能的 js 重复执行或覆盖的问题，目前是不支持运行 ajax 载入的页面里面的 js 的。

解决方法：所有页面都引用相同的 js，而这个 js 里面包含了所有的逻辑，事件部分使用委托来绑定。

SUI Mobile 官方有一个示例，细心的朋友可能会发现，里面也是通过路由加载页面，但是里面的一些JS插件照样能够执行，仔细看看作者写的 DEMO 就能明白怎么回事。

作者是将所有的 JS 事件都写到一个文件里面，然后每个页面都引用，这样所有的页面都是相同的执行脚本，然后通过给每个页面设置不同的页面 ID，然后判断改执行那段 JS 脚本。

$(document).on("pageInit", "#page-flow-picker", function(e, id, page) {
    $("#datetime-picker").datetimePicker({
      toolbarTemplate: '<header class="bar bar-nav">\
      <button class="button button-link pull-right close-picker">确定</button>\
      <h1 class="title">选择日期和时间</h1>\
      </header>'
    });
});

#page-flow-picker 就是需要被加载页面的PageID，给根元素绑定一个页面初始化完成的事件，也就是SUI的加载事件，完成以后执行下面的代码。