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