Javascript 调用了jquery click事件,但未执行某些DOM操作
我有一个html页面,id和类都是空的。它们由ajax get请求返回的数据填充。因此,用户将应用程序视为登录页面、主页、提供页面和事件页面。成功登录后,他们会看到一个主页。只有成功登录后,用户才能看到页脚,这是主页、优惠和活动的图像图标。html页面中的元素根据用户希望通过单击图像图标导航的页面显示或隐藏 我的问题是: 如果我Javascript 调用了jquery click事件,但未执行某些DOM操作,javascript,jquery,html,Javascript,Jquery,Html,我有一个html页面,id和类都是空的。它们由ajax get请求返回的数据填充。因此,用户将应用程序视为登录页面、主页、提供页面和事件页面。成功登录后,他们会看到一个主页。只有成功登录后,用户才能看到页脚,这是主页、优惠和活动的图像图标。html页面中的元素根据用户希望通过单击图像图标导航的页面显示或隐藏 我的问题是: 如果我已经有了报价和事件,那么从任何其他页面导航到这些页面都不会有问题,但是如果任何其中一个页面是空的,然后从空的内容页面导航到页面(有一些内容),那么在单击事件时,一些jqu
已经有了报价和事件,那么从任何其他页面导航到这些页面都不会有问题,但是如果任何其中一个页面是空的,然后从空的内容页面导航到页面(有一些内容),那么在单击事件时,一些jquery操作不会发生而且,我正在试图找出发生这种情况的原因?
比如说,从空的报价页到数据库中已有一些事件的事件页,
事件内容已填充,但
- 标题不会更改。标题仍然会显示offers,但内容是events
- 图像图标不会改变。我有普通和点击图片。点击图片仍将提供,而不是活动
但是,如果这两个页面都是空的或有一些数据
- 标题会正常更改
- 图像图标会正常更改
下面是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
$(“.fevent”).live('click',function(){
$.ajax({
网址:'http://192.168.3.100:3000/events.json?playerid='+$('#playerid').html(),
键入:“获取”,
cache:false,
成功:函数(数据){
//在将任何内容加载到元素中之前,始终先保持元素为空
$(“#事件_表”).html(“”);
//用提议填满桌子
$.each(数据、函数(索引、事件){
如果(事件['read']==1){
$(“#events_table”).append(“+event['description']+”开始日期:“+month[(新日期(event[“startdate”)))).getMonth()+”+(新日期(event[“startdate”)).getDate(),“+(新日期(event[“startdate”))).getFullYear()”结束日期:“+month[(新日期(event[“enddate”).getMonth())”((新日期(event[“enddate”)+).getMonth()),“+”。”(新日期(事件[“enddate”])。getFullYear()+'');
}
否则{
$(“#events_table”).append(“+event['description']+”开始日期:“+month[(新日期(event[“startdate”)))).getMonth()+”+(新日期(event[“startdate”)).getDate(),“+(新日期(event[“startdate”))).getFullYear()”结束日期:“+month[(新日期(event[“enddate”).getMonth())”((新日期(event[“enddate”)+).getMonth()),“+”。”(新日期(事件[“enddate”])。getFullYear()+'事件/'+事件[“id”]+'
);
$('total_bulls').html(事件['total_bulls');
}
count_bulls=count_bulls+parseInt(事件['total_bulls']);
});
//工作正常
$(“#登录内容”).hide();
//工作正常
$('signin_header').hide();
//工作正常
$('.submitimg').hide();
//工作正常
$(“#玩家_标题”).show();
//工作正常
$(“#播放器_内容”).hide();
//工作正常
$(“#提供#内容”).hide();
//工作正常
$(“#页脚”).show();
//工作正常
$(“#事件#内容”).show();
//*******************这是标题,它不会更改**************************
$('.alignleft').html('Events');
$('.fhome').html('');
$('.foffer').html('');
//****************这也没有改变****************************
$('.fevent').html('');
}//末日成功
});//fevent ajax的结尾
$(“[data position='fixed']”).fixedtoolbar('updatePagePadding');
});//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>
live已被弃用。请尝试在上使用。
$(function() {
$(".fevent").on('click', function(){
});
还要确保代码位于DOM就绪事件中。。
通过点击F12按钮,在浏览器中检查是否在第一时间看到发送的请求当它没有达到预期效果时,是否会出现脚本错误?不,它根本不会给我任何错误。此外,如果我在操作之前和之后放一条alert语句,alert语句会指示不同的nt值,但视觉效果不会改变。你能提供完整的标记吗?事件表在哪里?确保插入的HTML格式正确。有一个虚假的
(两次),一个缺少的
,所有img标记的格式都应该是
(带尾随的fwd斜线)@sushanthreddy:这是我的事件表HTML……。@Beetroot Beetroot:事件未执行文本的简单替换…$('.alignleft').HTML('events'));…但是,我想我没有提到我正在开发一个android手机应用程序。它通过ajax从rails获取远程数据。android上发出ajax请求的框架是phonegap