1

We are building a mobile website with Zepto.js. Most of our functionality is simple enough to avoid the bigger files needed with JQuery mobile. BUT ....

When I use .load() it seems to disrupt hide/show of related divs. My page structure is:

<div id="content">
  <div id="maincntr">
  Normal page
  content ...
  <div class="rvw">show more</div>
  </div>
  <div id="ajxcntr">

  </div>
</div>

The script is:

$('.rvw').click(function(){
$('#ajxcntr').show(),
$('#maincntr').hide(),
$('#ajxcntr').load('more/stuff.htm')
});

$('.bck').click(function(){
$('#maincntr').show(),
$('#ajxcntr').hide()
});

The stuff.htm contains a <div class="bck">Back</div>

The initial functions work fine, the divs are closed/opened and the file is loaded. But the .bck hide/show functions don't work. If I drop the .load() line from .rvw and simply trigger the show hide aspects everything works just fine for both.

So I am guessing there is an issue caused by the .load() aspect. Any ideas or suggestions?

after a break ...

Got it sorted, I needed to initiate the .bck functions AFTER loading the extra content.

$('.rvw').click(function(){
   $('#ajxcntr').show(),
   $('#maincntr').hide(),
   $('#ajxcntr').load('reviews/th-north.htm', function(){  
       $('.bck').click(function(){
           $('#maincntr').show(),
           $('#ajxcntr').hide()
       })
   })
});
4

0 に答える 0