Как организовать работы функции, которая использует добавленный JQuery класс?

Question

[way_t]

Всем привет.

$('.podcast__play').on('click', function() {
       $(this).addClass('playing');
    })

    $('.playing').on('click', function() {
            console.log('test');
    })

Скажите пожалуйста, почему не отрабатывается функция при нажатии на playing? Так понимаю, нужно отслеживать дополнительно это событие. Есть идеи, как это можно реализовать?

Answer 1

[Denis]

$('body').on('click', '.playing', function() {
            console.log('test');
    });

Answer 2

[wallydnb]

Событие не отрабатывается, потому-что оно вешается на элементы, имеющие класс playing на момент исполнения функции. У вас класс применяется позже, на событие click.

Возможно, вы хотели сделать нечто подобное:

function handleStoped() {
        console.log('stoped')
        $(this).removeClass('playing')
        $(this).text('play')
        $(this).off('click', handleStoped)
        $(this).on('click', handlePlaying)
}
function handlePlaying() {
        console.log('playing')
        $(this).addClass('playing')
        $(this).text('stop')
        $(this).off('click', handlePlaying)
        $(this).on('click', handleStoped)
}
$('.podcast__play').on('click', handlePlaying)