Почему Jquery toggle не работает после ajax?

Question

[Александр Кузнецов]

Ребят привет
Есть вот такой jquery

Обычный тоггл класса
В трёх вариациях

$(document).on('click', '#play', function() {
                    if ($(this).hasClass('fa-play')) {
                        $('#play').removeClass('fa-play');
                        $('#play').addClass('fa-pause');
                        audio.play();
                    } else if($(this).hasClass ('fa-pause')) {
                        $('#play').removeClass('fa-pause');
                        $('#play').addClass('fa-play');
                        audio.pause();
                    } else {

                    }
                });

$('#play1').click(function() {
                    if ($(this).hasClass('fa-play')) {
                        $('#play1').removeClass('fa-play').addClass('fa-pause');
                        audio1.play();
                    } else {
                        $('#play1').removeClass('fa-pause').addClass('fa-play');
                        audio1.pause();
                    }
                    $(this).addClass("fa-pause");  
                });

$("#play1").click(changeClass);
                function changeClass() {
                   $("#play1").toggleClass("fa-play fa-pause");
                   if ($(this).hasClass('fa-play')) {
                       audio1.pause();
                    } else {
                        audio1.play();
                    }
                };

Вот его html

<div class="controlvoice">
<i class="fa fa-play" id="play1"></i>
</div>

Но при запуске popup окна на ajax вот из этого скрипта:
https://github.com/dimsemenov/Magnific-Popup

Да и из других (пробовал несколько)
Перестаёт переключаться/добавляться класс.

Что делать?
Как быть?
Спасити!

Comments

[Егор Соколов]

Может быть дело в id. На класс не пробовали заменить?

Answer 1

[Ольга]

На кнопку навешано 3 обработчика,причем в первом случае есть делегирование - обработчик вешается на страницу и ужа в ней проверяется,не кнопка ли это.В случае аякса кнопка наверняка пересоздается,что убивает вторые 2 обработчика. Нужно везде сделать делегирование,как в первом случае.
Или я не поняла задачу?

Comments

[Александр Кузнецов]

Как сделать делегирование правильно?
Ниже в комментарии добавил про то, как всё это "обрабатывается"

Я убрал класс fa-play из кода: class="play fa fa-play" вовсе, оставил только class="play fa"

Иконка естественно пропала, при обычной загрузке страницы:
Иконки сперва нет вообще, потом после клика добавляется иконка "плей"
При повторном нажатии он меняется на "паузу" и срабатывает звук

После загрузки ajax
Иконки так же нет вообще, после клика появляется иконка "пауза" срабатывает звук, но в плей (остановку звука почему-то не переходит...)

Answer 2

[ThunderCat]

1) замените айди на класс, так как с айдишниками при создании и удалении элементов у вас будет лажа с дублями айди.
2) $(document).on('click', '.play', function() {... должно работать нормально.

3) в коде переключения перезаморочено с ифами

Comments

[Александр Кузнецов]

Попробовал и так:

$(document).on('click', '.play', function() {
					if ($(this).hasClass('fa-play')) {
						$('.play').removeClass('fa-play').addClass('fa-pause');
						audio.play();
					} else {
						$('.play').removeClass('fa-pause').addClass('fa-play');
						audio.pause();
					} 
				});

и так

$(".play").click(changeClass);
				function changeClass() {
				   $(".play").toggleClass("fa-play fa-pause");
				   if ($(this).hasClass('fa-play')) {
					   audio.pause();
					} else {
						audio.play();
					}

Не сработало ):
После загрузки попапа скрипт получается тупо не меняет класс.
Я убрал класс fa-play из кода: class="play fa fa-play" вовсе, оставил только class="play fa"

Иконка естественно пропала, при обычной загрузке страницы:
Иконки сперва нет вообще, потом после клика добавляется иконка "плей"
При повторном нажатии он меняется на "паузу" и срабатывает звук

После загрузки ajax
Иконки так же нет вообще, после клика появляется иконка "пауза" срабатывает звук, но в плей (остановку звука почему-то не переходит...)

Что то я делаю не так, хотя вроде всё так...

[Ольга]

Александр Кузнецов, audio.play(); - после аякса объект audio вообще существует? что скрывается за этой переменной?
Мы тут пытаемся восстановить,что вообще происходит по статочным данным, если общий код+ html слишком большие нужно пробовать на более простых примерах.
Также, нужно проверить есть ли вообще вхождение в обработчики алертом или выводом в консоль, а потом уже разбираться в работоспособности дальнейшего кода, например,в существовании обектов выборок или объектов, с которыми выполняются какие-либо действия.

[Александр Кузнецов]

В общем сработала вот такая вот история:

$(document).ajaxComplete(function(event,request,settings){
						$(document).on('click', '.play', function() {
							if ($(this).hasClass('fa-play')) {
								$('.play').toggleClass("fa-play fa-pause");
								audio.play();
							} else {
								$('.play').toggleClass("fa-pause fa-play");
								audio.pause();
							} 
						});

[Александр Кузнецов]

Ольга, объект аудио существует и музыка проигрывается, за этой переменной скрывается следующее:

var audio = new Audio('https://zvukipro.com/uploads/files/2017-08/1504162247_sobaka_-_lay_sobaki-2.mp3');

Мы тут пытаемся восстановить,что вообще происходит по статочным данным, если общий код+ html слишком большие нужно пробовать на более простых примерах.

Общий код - классический WP с "стандартной" темой.
Так понимаю, что в самом "скрипте всплывашки", тоже достаточно много кхм вопросов и не все работает ожидаемо, покурив Git нашлось решение.

Спасибо за помощь!