在 AJAX 加载的内容中初始化 jqtouch 中的链接

Question

我有一个内置于 jqtouch 的 iPhone Web 应用程序，当通过链接（“a”标签）加载内容时，下一页上的任何内容都会由 jqtouch 解析，并且所有链接都会被初始化。但是，当我通过 AJAX 调用加载内容并将其附加到元素时，该内容中的任何链接都不会由 jqtouch 初始化。因此，对这些链接的任何点击都是对新资源的全面点击，并且不由 jqtouch 处理，因此此时您已经有效地脱离了 jqtouch。

我的 AJAX 代码是：

#data
<script type="text/javascript">
      $.ajax({
        url: '/mobile/nearby-accounts',
        type: 'GET',
        dataType: 'html',
        data: {lat: lat, lng: lng},
        success: function(html) {
          $('#data').empty().append(html);
          // Is there some method I call on jqtouch to have any links in $('#data') be hooked up to the jqtouch lifecycle?
        }
</script>

提前致谢。

Answer 1

我可以通过做两件事来实现这一点：

1）通过修改 jqtouch.js 并将 liveTap 添加到返回的方法列表（在 jqtouch.js 的末尾），将以前的私有方法“liveTap”导出为公共方法：

publicObj {getOrientation:getOrientation,goBack:goBack,goTo:goTo,
 addAnimation:addAnimation,submitForm:submitForm, liveTap:liveTap};
return publicObj;

2）调用我的包装容器上的 liveTap 处理程序，其中包含我想要“连接”到 jqTouch 的链接：

      $('#data a').click(function(e) {
        e.preventDefault();
        jqTouch.liveTap(e);            
      });

Answer 2

执行以下操作对我来说效果更好，并且不需要修改源代码：

jQT.goTo('#slide', 'slide');

其中 #slide 是要滑动到的面板的 ID。

Answer 3

虽然 @Cody 的解决方案可行，但您最好在原始页面中添加容器 div，然后您可以异步填充该容器并为其添加动画。例如：在main.html中添加：


...

...


然后，在附加脚本中添加：

$('selector').append('<a href='#future">link</a>').find('a').click(function(e) {
  e.preventDefault();
  loadDataAndShow($(this).<read some context here>);
});

function loadDataAndShow() {
   // Use ajax like $.getJSON or whatever to load data here

   // populate $('#future') with data then 

   jQT.goTo('#future', 'slide');
}

然后，从脚本附加链接然后加载 jQTouch 容器的问题是，您必须公开隐藏的方法，即使这样也不是 100%。另外，如果您正在做建议，您可以分解追加方法，首先在没有“.click”的循环中进行追加，然后使用单个 jQuery 命令来添加单击侦听器。您可以/应该添加属性以加载上面提到的上下文。

@emtrane：问题是关于 ajax 加载 jQuery 块，该块本身在链接中加载附加内容。