0

AJAX 呼び出しのクリック イベントに問題があります。最初の AJAX 呼び出しまで存在しない div でクリック イベントが発生するため、AJAX 呼び出しがネストされています。基本的に、データベースからユーザーのコメントを読み込んでおり、コメントに上下の投票ボタンがあります。これらは 2 番目の ajax 呼び出しです。ここで JS を確認できます。

//FIRST LOAD THE COMMENTS WITH THE FIRST AJAX CALL
$('.comments_submit').each(function(){
    var comments_text = $(this).parent().find('textarea').val();
    var video_id = $(this).closest('div.home_video').find('.video').attr('id');

    var myData = 'body=' + comments_text + '&video_id=' + video_id + '&type=load';
    var that = this;

    $.ajax({
                type: 'POST', // HTTP method POST or GET
                url: 'comments_ajax.php', //Where to make Ajax calls
                dataType:'text', // Data type, HTML, json etc.
                data:myData, //post variables
                success:function(response){

                //UPON SUCCESSFULLY LOADING THE COMMENTS / BIND CLICK EVENT TO VOTE UP AND VOTE DOWN
                    $(that).closest('div.home_video').find('.comments_list').html(response);

                    $('.vote_link.down').each(function(){
                        $(this).click(function(){
                            var comment_id = $(this).closest('.comment_box').attr('id');

                            //MAKE AJAX CALL TO SUBMIT COMMENTS

                            var myData = 'comment_id=' + comment_id + '&type=vote_down';
                            var that = this;

                            $.ajax({
                                type: 'POST', // HTTP method POST or GET
                                url: 'comments_ajax.php', //Where to make Ajax calls
                                dataType:'text', // Data type, HTML, json etc.
                                data:myData, //post variables
                                success:function(response){

                                //REFORMAT UPON SUCCESSFUL AJAX CALL
                                $(that).text(response);

                                },
                                error:function (xhr, ajaxOptions, thrownError){
                                    alert('didnt work'); //throw any errors
                                }
                            });
                        });
                    });


                    $('.vote_link.up').each(function(){
                        $(this).click(function(){
                            var comment_id = $(this).closest('.comment_box').attr('id');

                            //MAKE AJAX CALL TO SUBMIT COMMENTS

                            var myData = 'comment_id=' + comment_id + '&type=vote_up';
                            var that = this;

                            $.ajax({
                                type: 'POST', // HTTP method POST or GET
                                url: 'comments_ajax.php', //Where to make Ajax calls
                                dataType:'text', // Data type, HTML, json etc.
                                data:myData, //post variables
                                success:function(response){

                                //REFORMAT UPON SUCCESSFUL AJAX CALL
                                $(that).text(response);

                                },
                                error:function (xhr, ajaxOptions, thrownError){
                                    alert('didnt work'); //throw any errors
                                }
                            });
                        });
                    });



                },
                error:function (xhr, ajaxOptions, thrownError){
                    alert('didnt work'); //throw any errors
                }
        });
});

コメント読み込みのサーバー側コードは次のとおりです。

if($_POST['type']=="load"){
$sql_select = "SELECT * FROM comments WHERE video_id = '$video_id' ORDER BY timestamp DESC LIMIT 7";
$result_select = $mysqli->query($sql_select);

while($row = mysqli_fetch_array($result_select)){
    echo "<div class='comment_box' id='".$row['id']."'>".$row['body']."
        <div class='votes'>
            <a class='vote_link up'>UP (".$row['vote_up'].")</a>
            <a class='vote_link down'>DOWN (".$row['vote_down'].")</a>
        </div>
    </div>";
}

}

そして、賛成票のサーバー側コード (反対票のコードとほとんど同じです):

if($_POST['type']=="vote_up"){
$comment_id = $_POST['comment_id'];

$sql_select = "SELECT * FROM comments WHERE id = '$comment_id'";
$result_select = $mysqli->query($sql_select);
$row = mysqli_fetch_array($result_select);
$votes = $row['vote_up'] + 1;

$sql_update = "UPDATE comments SET vote_up = '$votes' WHERE id = '$comment_id'";
$result_update = $mysqli->query($sql_update);

$sql_select = "SELECT * FROM comments WHERE id = '$comment_id'";
$result_select = $mysqli->query($sql_select);
$row_vote = mysqli_fetch_array($result_select);

echo "
UP (".$row_vote['vote_up'].")
";

}

いくつかのこと。ボタンをクリックすると、何らかの理由で UP または DOWN フィールドに複数の賛成票が追加されます。ただし、クリックイベントのバインドも解除されます。

以前に AJAX 呼び出しをネストしたことがないので、最初の関数が発生した後に AJAX 関数をバインドするより良い方法があるでしょうか? ご協力いただきありがとうございます！

4

2 に答える 2

0

あなたはできるはずです：

$('.vote_link.down').click(function(){
    var comment_id = $(this).closest('.comment_box').attr('id');
    // etc.
});

$('.vote_link.up').click(function(){
    var comment_id = $(this).closest('.comment_box').attr('id');
    // etc.
});

これにより、コードが簡素化され、問題の一部が修正される可能性があります。

于 2013-08-21T00:23:05.353 に答える
0

私は答えを見つけました（同じ問題を抱えている他の人のために）。トップ レベルの AJAX 呼び出し内で関数をバインドする代わりに、次のように $(document).on() を使用して関数を呼び出します。

$(document).on("click",".vote_link.down",function(e){
     alert('testing'); 
 });
于 2013-08-21T07:14:01.190 に答える