2

我正在为游戏添加喜欢和不喜欢的链接。最初喜欢是活动的，用户点击它会显示

 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>
4

2 回答 2

3

代替

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

（您也可以更简单地将其保存在全局变量中，而不是每次都读取）

示范

于 2012-11-23T13:28:40.313 回答
0

也许您使用的是较旧的 jQuery 版本。在 1.7 之前的 jQuery 版本中，您必须添加与 1.7 不同的事件侦听器。使用 .live 而不是 .on。

例子：

$('.gameLikeStatus').live('click', function(event){
    // Your code here
});
于 2012-11-30T00:21:34.680 回答