Повторное событие Click в AJAX после его использования

Question

У меня возникли проблемы с событием click на вызове AJAX. У меня есть вызовы AJAX вложенные, потому что событие click происходит в div, который не существует до первого вызова AJAX. В основном я загружаю комментарии пользователей из базы данных, а затем на комментариях есть кнопка «вверх-вниз». Это второй вызов 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'].") 
"; 

}

Пара вещей. Когда я нажимаю кнопку, по какой-то причине она добавляет несколько голосов в поля ВВЕРХ или ВНИЗ. Но это также отменит событие click.

Я никогда не вставлял вызовы AJAX раньше, поэтому, возможно, есть лучший способ связать функцию AJAX после первой функции? Спасибо за вашу помощь!

Answer 1

Вы должны быть в состоянии сделать:

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

Это должно упростить код и может исправить некоторые из ваших вопросов.

Answer 2

Я нашел ответ (для тех, у кого есть такая же проблема). Вместо того, чтобы связывать функции в пределах вызовов AJAX верхнего уровня, просто используйте $ (document) .on(), чтобы вызвать такую ​​функцию:

$(document).on("click",".vote_link.down",function(e){ 
    alert('testing'); 
});