我正在为游戏放置喜欢和不喜欢的链接。 最初喜欢是活动的,用户点击
喜欢它会显示 unlike link
1 like this game
没关系。但是当我们单击不同链接时,它会重新加载页面。我不想重新加载页面
<div class="gameLikeStatus">
<a href="likeit" id="likeitlink">Like</a>
</div>
<div class="totalLikes">
<span id="likesCount"><s:property value="likes"/></span> like this game<br>
</div>
<script>
$('a#likeitlink').bind('click',function(event){
event.preventDefault();
$('.gameLikeStatus').html('<a href="unlikeit" id="Unlikeitlink">Unlike</a>');
$likesNo= $('#likesCount').html();
$likesNo++;
$('#likesCount').html(""+$likesNo);
});
$('a#Unlikeitlink').bind('click',function(event){
event.preventDefault();
$('.gameLikeStatus').html('<a href="likeit" id="likeitlink">Like</a>');
$likesNo= $('#likesCount').html();
$likesNo--;
$('#likesCount').html(""+$likesNo);
});
</script>
替换
$('a#Unlikeitlink').bind('click',function(event){
跟
$('.gameLikeStatus').on('click', '#Unlikeitlink', function(event){
(另一个也一样)
当您执行 $('a#Unlikeitlink').bind
时,集合为空,因为链接尚不存在,因此这不执行任何操作。 on 启用对尚不存在的对象的委派。由于您没有绑定回调,因此您没有阻止正常的链接行为,因此出现了问题。
您还应该解析您的递增或递减的 html:
$('.gameLikeStatus').on('click', '#likeitlink', function(event){
event.preventDefault();
$('.gameLikeStatus').html('<a href="unlikeit" id="Unlikeitlink">Unlike</a>');
$likesNo= parseInt($('#likesCount').html(), 10) || 0;
$likesNo++;
$('#likesCount').html(""+$likesNo);
});
$('.gameLikeStatus').on('click', '#Unlikeitlink', function(event){
event.preventDefault();
$('.gameLikeStatus').html('<a href="likeit" id="likeitlink">Like</a>');
$likesNo= parseInt($('#likesCount').html(), 10) || 0;
$likesNo--;
$('#likesCount').html(""+$likesNo);
});
(您也可以更简单地将其保存在全局 var 中,而不是每次都读取它)
示范
也许你使用的是较旧的jQuery版本。在 1.7 之前的 jQuery 版本中,您必须以与 1.7 不同的方式添加事件侦听器。使用 .live 而不是 .on。
例:
$('.gameLikeStatus').live('click', function(event){
// Your code here
});