How to organize the work of a function that uses the added jQuery class?

Question

css

Hello.

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

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

Please tell me why the function is not processed when clicking on playing? So I understand, you need to track this event additionally. Any ideas how this can be implemented?

Answer 1

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

Answer 2

The event is not processed because it is hung on elements that have the playing class at the time the function is executed. Your class is applied later, on the click event.
Perhaps you wanted to do something like this:

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)