Конфликт? лайки и прокрутка ajax

[EvilScorpion]

Привед Уважаемые программисты.
Делаю вывод новостей каждые 6 постов, но тут походу конфликт или я не пойму в чем дело, перестает работать "лайк и дизлайк" после вывода 6 новых новостей при скролинге т.е все новости которые выводятся через ajax скрилинг лайки и дизлайки прекращают работать а первые 6 новостей работают.

Вот два когда, первый скролинг и второй //VOTE лайки и дизлайки

PHP код:

                
            //####### on page load, retrive votes for each content
    $.each( $('.voting_wrapper'), function(){
        
        //retrive unique id from this voting_wrapper element
        var unique_id = $(this).attr("id");
        
        //prepare post content
        post_data = {'unique_id':unique_id, 'vote':'fetch'};
        
        //send our data to "like_dislike.php" using jQuery $.post()
        $.post('like_dislike.php', post_data,  function(response) {
        
                //retrive votes from server, replace each vote count text
                $('#'+unique_id+' .up_votes').text(response.vote_up); 
                $('#'+unique_id+' .down_votes').text(response.vote_down);
            },'json');
    });
    
    
    //####### on button click, get user vote and send it to like_dislike.php using jQuery $.post().
    $(".voting_wrapper .voting_btn").click(function (e) {
         
        //get class name (down_button / up_button) of clicked element
        var clicked_button = $(this).children().attr('class');
        
        //get unique ID from voted parent element
        var unique_id     = $(this).parent().attr("id"); 
        
        if(clicked_button==='down_button') //user disliked the content
        {
            //prepare post content
            post_data = {'unique_id':unique_id, 'vote':'down'};
            
            //send our data to "like_dislike.php" using jQuery $.post()
            $.post('like_dislike.php', post_data, function(data) {
                
                //replace vote down count text with new values
                $('#'+unique_id+' .down_votes').text(data);
                
                //thank user for the dislike
            //    alert("Thanks! Each Vote Counts, Even Dislikes!");
                
            }).fail(function(err) { 
            
            //alert user about the HTTP server error
            //alert(err.statusText); 
            });
        }
        else if(clicked_button==='up_button') //user liked the content
        {
            //prepare post content
            post_data = {'unique_id':unique_id, 'vote':'up'};
            
            //send our data to "like_dislike.php" using jQuery $.post()
            $.post('like_dislike.php', post_data, function(data) {
            
                //replace vote up count text with new values
                $('#'+unique_id+' .up_votes').text(data);
                
                //thank user for liking the content
                //alert("Thanks! For Liking This Content.");
            }).fail(function(err) { 
            
            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }

    });
    //end 
    
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */    
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */ 
var startFrom = 6;

    /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
    $(window).scroll(function() {

                
        /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
        if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress) {
    
        $.ajax({            
            /* адрес файла-обработчика запроса */
            url: 'obrabotchik.php',
            /* метод отправки данных */
            method: 'POST',
            /* данные, которые мы передаем в файл-обработчик */
            data: {"startFrom" : startFrom},
            /* что нужно сделать до отправки запрса */
            beforeSend: function() {
                
            /* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
            inProgress = true;}
            
            /* что нужно сделать по факту выполнения запроса */            
            }).done(function(data){
                
            
            /* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */ 
            data = jQuery.parseJSON(data);
            
            /* Если массив не пуст (т.е. статьи там есть) */
            if (data.length > 0) {
                         
            /* Делаем проход по каждому результату, оказвашемуся в массиве,
            где в index попадает индекс текущего элемента массива, а в data - сама статья */ 
                
            $.each(data, function(index, data){
                   
            /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */    
            $("#articles").append("<div  class='webo4ka1'><div class='webo4ka2'>\
            <img class='mem'  src='uploads/"+ data.path +"' title='"+ data.description +"' /></div><div class='my_bot'>\
            <div class=\"voting_wrapper\" id=\""+ data.id +"\">\
            <div class=\"voting_btn\"><div class=\"down_button\"><span class=\"dis_like\"><img src=\"img/happy.png\"/></span></div><span class=\"down_votes\">0</span></div>\
            <div class='voting_btn'><div class='up_button'><span class='like'><img src='img/happy.png'/></span></div><span class='up_votes'>0</span></div>\
            <span class=report'></span>\
            </div></div></div>");
            });
    
                    
            /* По факту окончания запроса снова меняем значение флага на false */
            inProgress = false;
            // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
            startFrom += 6;

     
            }});   
        }
    });
}); 


[Naive]

потомушта на них не привязываются события: либо привязывай после подгрузки, либо изай живые события. api.jquery.com/on/

[EvilScorpion]

Может скажете как их привязать?

[Alex11223]

По ссылке выше все показано и рассказано же.

[EvilScorpion]

Вроде получилось, сделал из лайков функции и вывел в скролинге

$( window ).trigger( "click", my__load_Button());
$(window).trigger( "click", my__Button());

[Alex11223]

эм... А .trigger причем тут? Может проще тогда просто вызвать эту функцию? Тем более что вы вроде бы это и делаете, только вокруг вызова еще понаписали всякие странные вещи.

my__load_Button();

Про on речь была о том, что кодом типа

$(".voting_wrapper .voting_btn").click(function (e) {

вы добавляете обработчик клика только для существующих в момент вызова элементов.

А если сделать как-то так, то будет работать и для новых элементов:

$( "body" ).on( "click", ".voting_wrapper .voting_btn", function(e) {

(вместо body может быть любой селектор всегда существующего родителя, в котором они все лежат)

[EvilScorpion]

Почему то при простом выводе функций, а именно где отслеживается клик по лайку или дизлайку, он не +1 делает, а +2 +6 и бывает даже +30 ну рандомное число какое вообщем, мне кажется это зависит от того сколько раз погрузился скролинг.

[Alex11223]

Да, вероятно вы таким способом вешаете несколько одинаковых обработчик на один элемент. (+1 обработчик у всех старых при каждом скроле)