2

我正在尝试创建一个简单的喜欢/不喜欢按钮来更新数据库。jQuery 代码位于外部文件中。PHP 变量是从 Codeigniter 中的控制器发送的。

当页面重新加载时，它会正确显示当前登录的用户是否能够喜欢或不喜欢他们正在查看的用户。如果他们单击一次，一切正常 - 按钮在喜欢/不喜欢之间变化，喜欢的数量增加或减少，并且数据库被更新。第二次单击时，它会重新加载整个页面但不更新数据库 - 我如何停止刷新 + 使其在不重新加载页面的情况下更新？

PHP：

<div id="like_button">

<p><a href=""><span id="like_unlike" class="link"><?php if($already_liked){echo "Unlike";}else{echo"Like";}?></span></a> (<span id="number_of_likes"><?php echo $number_of_likes; ?></span>)</p>

<span id="liked_unliked_user_id" style="display:none"><?php echo $liked_unliked_user_id; ?></span>
<span id="liking_unliking_user_id" style="display:none"><?php echo $liking_unliking_user_id; ?></span>

</div>

jQuery：

$( function() {

$( '#like_button a' ).click( function( e ) {

  var thisrecord = $( this ).closest( "div" );

  var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
  var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
  var like_unlike = thisrecord.find( "#like_unlike" ).html();


  if (like_unlike == 'Like') 
  {
    $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
    var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
    thisrecord.find( "span#number_of_likes" ).html( likes );
    $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
  }
  else
  {
    $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
    var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
    thisrecord.find( "span#number_of_likes" ).html( likes );
    $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
  }

  e.preventDefault();
});
});
4

1 回答 1

4

当您第一次创建.click()事件时，jQuery 选择器会找到所有'#like_button a'元素并将此事件附加到它们。当您#like_button a使用$(this).replaceWith(...)此新元素替换元素时，不会附加事件.click()，因为您的原始选择器仅运行一次以附加事件（当时该元素不存在）。

在您的代码中，页面重新加载是因为您单击了一个简单地链接回当前页面的链接——您的.click()函数使用e.preventDefault().

如果您命名函数，然后.click()在替换对象后重新附加事件，这应该可以正常工作：

$( function() {
    function toggleLike(e)
    {
        var thisrecord = $( this ).closest( "div" );

        var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
        var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
        var like_unlike = thisrecord.find( "#like_unlike" ).html();


        if (like_unlike == 'Like') 
        {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        } else {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        }

        e.preventDefault();
    }

    $( '#like_button a' ).click(toggleLike);
});
于 2013-02-08T22:09:28.893 回答