Перестает работать JS (без ошибок)

D
На сайте с 28.06.2008
Offline
993
179

Такая ситуация... есть страница где выводятся комменты их может быть от 0 до десятков тысяч, поэтому комменты выводятся с лимитом в 60 + пагинация.

Пришла мне идея сделать чекбоксы чтобы нажав нужный чекбокс  можно было без перезагрузки отфильтровать только хорошие или только плохие отзывы.

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

На этом этапе все работает, а не работает вот что. У каждого отзыва есть две кнопочки (палец вверх и палец вниз, голосовалка за каждый конкретный отзыв), эти кнопки работают если страница только загружена, но стоит применить сортировку и кнопки перестают работать. Каждая кнопка содержит атрибут data-id и data-value которые так же пост запросом уходят на сервер.

Я проверил код кнопок не отличается при первоначально загрузке и при сортировке через JS  (т.е. нужные атрибуты содержат правильные данные). Никаких ошибок в консоле нет при нажатии (когда кнопки не работают).

Функция сортировки отзывов и функция работы кнопок в одном файле (функция кнопок выше если это важно...).

Есть мысли почему могут переставать работать кнопки без ошибок в консоле?

dma84
На сайте с 21.04.2009
Offline
168
#1

jQuery.on() в помощь или описание этой функции для общего понимания.

На вновь добавленные элементы ваши события не распространяются.

D
На сайте с 28.06.2008
Offline
993
#2

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

JS еще плохо знаю, можете помочь?

Вот моя функция генерации простыни отзывов

   jQuery(".checked_comm_div input").click(function (e) {
          var votes = $("input[name='radio']:checked").val();   
var objectid = $("#data-similar").attr("data-id"); var objectgroup = $("#data-similar").attr("data-type"); var all = $(".scomments-all");      
  jQuery.ajax({
                    type: 'POST',
                    url: '/index.php',
                    dataType: 'json',
                    timeout: 5000,
                    data: {
                        option: 'com_comments',
                        view: 'item',
                        format: 'json',
                        task: 'votes',
                        votes: votes,
                        objectid: objectid,
                        objectgroup: objectgroup
                    },
                    success: function (data) {
                        console.log(data)
                        let str = '';
                        let styleComments;
                        let text_title;
                        let status;

                        for (var i = 0; i < data.length; i++) {
                            str += '<div class="scomments-item ' + styleComments + '"' + status + '>';
                            ////далее еще много раз собирается str +=
                        }
                        $("div.pagination").empty()
                        all.html(str);
                    }
                });
            });

а вот функция обработки нажатия кнопок

            jQuery(".scomments-vote a").click(function (e) {
                e.preventDefault();
                var el = jQuery(this).parent();
                var id = jQuery(this).attr("data-id");
                var value = jQuery(this).attr("data-value");

                jQuery.ajax({
                    type: 'POST',
                    url: '/index.php',
                    dataType: 'json',
                    timeout: 5000,
                    data: {
                        option: 'com_comments',
                        view: 'item',
                        format: 'json',
                        task: 'vote',
                        value: value,
                        id: id
                    },
                    success: function (rows) {
                        el.html('Спасибо ваш голос принят');
                    }
                });
            });

попробовал ее сунуть после 

all.html(str);

получаю ошибки, не подскажите как ее корректно вставить?

D
На сайте с 28.06.2008
Offline
993
#3
Заменил jQuery на $ у функции нажатия на кнопки вставил после 
all.html(str);

и все заработало

dma84
На сайте с 21.04.2009
Offline
168
#4

Вы так ничего и не поняли.

Вместо

jQuery(".checked_comm_div input").click

Напишите

jQuery('body').on('click', '.checked_comm_div input', function()
{
        //код функции
});

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий