Как сделать лайк в ленте новостей и исправить проблему: js «не видит» загруженные через ajax блоки?

Question

[Денис Артемьев]

Здравствуйте, имеется сайт, на нем лента публикаций.

Принцип очень похож на "В контакте": при скроллинге к концу страницы должны подгружаться новости.

К каждой новости пользователь может написать комментарий, ставить лайк, дизлайк.

Сейчас это все сделано очень криво.
Основное требование это ajax, чтобы все эти действия выполнялись без перезагрузки страницы.

Сейчас лайки сделаны таким образом:
С помощью Php генерируются id у элементов. По счетчику.
1. Кнопка like1, отправляет значение скрытого поля id_pub1 в обработчик ajax.
2. Кнопка like2, отправляет значение скрытого поля id_pub2 в обработчик ajax.
Ну и так ко всем записям.

В JS это обрабатывается так:

$(document).ready(function () {
        var i = 0; 
        while(i < 1000){
            (function(i){
                $("#like"+i).click(function(){funcLike(i)});
                $("#dislaik"+i).click(function(){funcDisLike(i)});
            })(i++);
        }
    });

Соответственно в функциях уже проверяется снял он лайк/дизлай или поставил, отправляется в обработчик и т.д.

1 вопрос: Правильно ли это вообще организовано? Очень смущает счетчик в js до 1000, потому что, теоретически можно загрузить и больше публикаций. Да и вообще генерация id-шников в php, чувствую в итоге приведет к какой-нибудь путанице.

Следующая проблема заключается в том, что если я догружаю с помощью ajax публикации, приведенный выше js код не обрабатывает загруженные id. Проблема распространенная, но решения я так и не нашел.

2 вопрос: Опять же, изначально правильно ли это вообще? Если да, то как обойти эту проблему?

Ну и вообще, основная цель моего вопроса, это узнать, как бы Вы подошли к реализации подобной ленты публикаций?

Заранее спасибо за ответы.

Answer 1

[FMars]

html

<div class="news">
   some news1
   <button class="like" data-id="1">like</button>
</div>

<div class="news">
   some news2
   <button class="like" data-id="2">like</button>
</div>

jquery

$(document).on('click','.like',function(){
   id = $(this).attr('data-id');

   // твоя функция
   funcLike(id);
});

Comments

[Денис Артемьев]

Спасибо за ответ, действительно помогло) При дозагрузке через ajax тоже работает

Answer 2

[A K]

Странно, в ванилле таких проблем не наблюдал, используйте ее вместо жикверу, тем более она быстрее чем жикверу

Comments

[Денис Артемьев]

Спасибо за ответ. Тут не в jQuery дело, а во мне скорее) Из ответов ниже сделал и заработало.

Answer 3

[Andrey Dyrkov]

Вообще такие вещи хранятся в базе данных(БД), средствами ajax вы отсылаете данные в файл, который будет обрабатывать всё что вам надо(php), и в нём должна добавляться необходимая запись в БД. В БД вы храните кто поставил лайк (чтобы нельзя было поставить его 100 раз), к какому посту(например id поста) и тд.... Счётчик можно обновлять каждые 1-10 секунд посредством ajax. SQL-ем можно подсчитать количество записей о лайках в БД для поста. Не используйте setInterval() она использует скрытый вызов eval(), которая подрывает безопасность кода.

Comments

[Денис Артемьев]

Спасибо за ответ. Само собой все хранится в mysql, у меня вопрос касательно организации js/ajax/html, в php и mysql там вроде более менее все :)