我有一个 html 页面，其 id 和 class'es 为空。它们由 ajax get 请求返回的数据填充。因此，用户将应用程序视为登录页面、主页、优惠页面和活动页面。成功登录后，他们会看到一个主页。只有成功登录后，用户才能看到页脚，即首页、优惠和活动的图像图标。html 页面中的元素shown or hidden基于用户想要通过单击图像图标来导航的页面。
我的问题是：
如果 I already have offers, and events，那么从任何其他页面导航到这些页面不会有问题，但如果有的话one of these is empty，那么从空内容页面导航到页面（有一些内容），一些 jquery 操作do not occur在click event. 而且，我试图找出为什么会这样？
比如说，从空的报价页面到数据库中已经有一些事件的事件页面，事件内容被填充，但是
- 标题不会改变。标题仍然会说要约，但内容是事件。
- 图像图标不会改变。我有正常和点击图像。点击图像仍将提供，而不是事件。
但是，如果这两个页面都是空的或有一些数据，
- 标题正常更改。
- 图像图标正常变化。
下面是jquery点击事件脚本
$(".fevent").live('click', function(){
$.ajax({
url: 'http://192.168.3.100:3000/events.json?playerid='+$('#playerid').html(),
type: "get",
cache: false,
success: function(data) {
//keep the element is always empty first before loading anything into it
$('#events_table').html('');
//fill the table with offers
$.each(data, function(index, event) {
if (event['read'] == 1){
$('#events_table').append('<tbody><tr class="event_list"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/'+ event['code'] +'e.png" width="60px"></td></td><td class="description"><h3>'+ event['description']+ '</h3><p>Start Date: '+ month[(new Date(event["startdate"])).getMonth()] + ' ' + (new Date(event["startdate"])).getDate() +', '+ (new Date(event["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(event["enddate"])).getMonth()] + ' ' + (new Date(event["enddate"])).getDate() +', '+ (new Date(event["enddate"])).getFullYear() +'</p></td></tr>');
}
else {
$('#events_table').append('<tbody><tr class="event_list_unread"><td class="spacer"><img alt="Spacer" src="css/images/spacer.png"></td><td class="image"><img height="60px" src="css/images/'+ event['code'] +'e.png" width="60px"></td></td><td class="description"><h3>'+ event['description']+ '</h3><p>Start Date: '+ month[(new Date(event["startdate"])).getMonth()] + ' ' + (new Date(event["startdate"])).getDate() +', '+ (new Date(event["startdate"])).getFullYear() +'</p><p>End Date: '+ month[(new Date(event["enddate"])).getMonth()] + ' ' + (new Date(event["enddate"])).getDate() +', '+ (new Date(event["enddate"])).getFullYear() +'</p></td><td class="mark_as_read"><img alt="Unread1" class="unread" src="css/images/unread1.png"><p class="read" style="display:none">events/'+event["id"]+'</p></td></tr></tbody>');
$('#total_bulbs').html(event['total_bulbs']);
}
count_bulbs = count_bulbs + parseInt(event['total_bulbs']);
});
//working fine
$('#signin_content').hide();
//working fine
$('#signin_header').hide();
//working fine
$('.submitimg').hide();
//working fine
$('#player_header').show();
//working fine
$('#player_content').hide();
//working fine
$('#offers_content').hide();
//working fine
$('#footer').show();
//working fine
$('#events_content').show();
//*******************this is the header and it is not changing**************************
$('.alignleft').html('Events');
$('.fhome').html('<img alt="Home" class="footer_img" src="css/images/home.jpg" width="100%">');
$('.foffer').html('<img alt="Offers" class="footer_img" src="css/images/offers.jpg" width="100%">');
//****************this is not changing also****************************
$('.fevent').html('<img alt="Events" class="footer_img" src="css/images/eventsover.jpg" width="100%">');
}//end of fevent success
});//end of fevent ajax
$( "[data-position='fixed']" ).fixedtoolbar( 'updatePagePadding' );
});//end of fevent
以下是我的标题：
<div data-role="header" data-tap-toggle="false" data-position="fixed" id="player_header" style="display:none">
<img alt="Header" src="css/images/header.jpg" width="100%" class="headerimg">
<div class="ui-bar">
<h3 class="alignleft"></h3>
<div class="alignright" id="home_notification"><img alt="Redlight" height="31px" src="css/images/redlight.png" class="notification_img" width="35px"></div>
<div style="clear: both;"></div>
</div>
</div>
以下是我的页脚
<div id="footer" style="display:none">
<ul>
<li class="fhome"><img alt="Home" class="footer_img" src="css/images/home.jpg" width="100%"></li>
<li class="foffer"><img alt="Offers" class="footer_img" src="css/images/offers.jpg" width="100%"></li>
<li class="fevent"><img alt="Events" class="footer_img" src="css/images/events.jpg" width="100%"></li>
<li class="fpromo"><img alt="Promo" class="footer_img" src="css/images/promo.jpg" width="100%"></li>
<li class="fnews"><img alt="News" class="footer_img" src="css/images/news.jpg" width="100%"></li>
</ul>
</div>