2

データベースを更新する単純なlike/unlikeボタンを作成しようとしています。jQueryコードは外部ファイルにあります。PHP変数は、Codeigniterのコントローラーから送信されます。

ページが新しく読み込まれると、現在ログインしているユーザーが、表示しているユーザーを高く評価できるかどうかが正しく表示されます。一度クリックすると、すべてが正常に機能します。ボタンは「いいね」と「違う」の間で変わり、いいねの数が増減し、データベースが更新されます。2回目にクリックすると、ページ全体が再読み込みされますが、データベースは更新されません。更新を停止し、ページを再読み込みせずに更新するにはどうすればよいですか。

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要素を使用して要素を置き換えると、元のセレクターがイベントをアタッチするために1回だけ実行されたため、イベントはアタッチされません（この時点ではこの要素は存在しませんでした）。$(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 に答える