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

Dram

28 ноября 2020, 17:49

180

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

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

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

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

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

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

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

dma84

28 ноября 2020, 18:05

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

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

Dram

28 ноября 2020, 19:06

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

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);

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

Dram

29 ноября 2020, 06:16

Заменил jQuery на $ у функции нажатия на кнопки вставил после

all.html(str);

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

dma84

29 ноября 2020, 08:42

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

Вместо

jQuery(".checked_comm_div input").click

Напишите

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

Похожие записи:

Добавить комментарий Отменить ответ