Question

我喜欢和不喜欢游戏的链接。最初像用户点击一样活跃，就像它会显示

 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>

Answer 1

替换

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

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

Demonstration

Answer 2

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

示例：

$('.gameLikeStatus').live('click', function(event){
    // Your code here
});

替换链接不是使用ajax调用

2 个答案: