Q:

Jquery switch between 2 colors by css class

I need switches between 2 icons (in this example colors) by css class on element if i click on it. I have this code (which is not working):

$( ".play" ).on('click', function(event) {
    event.preventDefault();


    $(this).removeClass('play');
    $(this).addClass('stop');

    console.log('play');
});

$( ".stop" ).on('click', function(event) {
    event.preventDefault();


    alert();

    $(this).removeClass('stop');
    $(this).addClass('play');

    console.log('stop');
});
.play {
    background-color: black;
}

.stop {
    background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="play" style="width:100px; height: 100px; display: block;"></a>

A:

You appear to be using Event Delegation with jQuery, but I think you might have it a little wrong:
$("body")
    .on("click", ".play", function(event) {
        // change "play" to "stop"
    })
    .on("click", ".stop", function(event) {
        // change "stop" to "play"
    });

You want to attach the click handler to the <body> tag, and then provide jQuery with the event name, CSS selector, and event handler.
Reference: http://api.jquery.com/on/

