开发者

Initializing links in jqtouch in AJAX loaded content

开发者 https://www.devze.com 2023-01-01 12:24 出处:网络
I have an iphone web app built in jqtouch, when content is loaded by links (\"a\" tags) then any content on the next page is parsed by jqtouch and any links are initialized. However, when I load conte

I have an iphone web app built in jqtouch, when content is loaded by links ("a" tags) then any content on the next page is parsed by jqtouch and any links are initialized. However, when I load content via an AJAX call and append() it 开发者_如何学编程to an element then any links in that content are NOT initialized by jqtouch. Thus any clicks on those links are full-blown clicks to a new resource and are not handled by jqtouch, so at that point you've effectively broken out of jqtouch.

My AJAX code is:

#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>

Thanks in advance.


I was able to achieve this by doing two things:

1) Exporting the previously private method "liveTap" as public by modifying jqtouch.js and adding liveTap to the list of methods returned (at the end of jqtouch.js):

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

2) Calling the liveTap handler on my wrapped container which has the links I would like to "hook up" to jqTouch:

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


Doing the following worked better for me and it didn't require modifying the source:

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

where #slide is the ID of the panel to slide to.


While @Cody's solution would work, you are better of adding container div in the originating page that you could then populate asynchronously and animate to. For example: in main.html add:

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

Then, in the appending script, add:


$('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');
}

Then problem with appending a link from script that then loads jQTouch containers is that you then have to expose hidden methods and even then it's not 100%. Also, if you are doing suggestions, you can break down the append method to first do appends in a loop without the '.click', then a single jQuery command to add the click listener. You can/should add attributes to the in order to load context referred to above.

@emtrane: the questions is about ajax loading a jQuery block that itself loads additional content in a link.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号