Question

我有一个内置于jqtouch的iphone web应用程序，当内容由链接（“a”标签）加载时，下一页上的任何内容都由jqtouch解析，并且所有链接都已初始化。但是，当我通过AJAX调用加载内容并将append()加载到元素时，该内容中的任何链接都不会被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”导出为public：

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中添加：

... <div id="future"></div> ...

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


$('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％。此外，如果您正在建议，您可以分解append方法，首先在没有'.click'的循环中追加，然后使用单个jQuery命令添加click侦听器。您可以/应该添加属性以加载上面提到的上下文。

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

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

3 个答案: