I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class.
Here is the setup: I have two buttons. When I click the first button, it toggles a class on the second button which changes its color. However, when I try to add a click event to the 'pushed' class, nothing happens.
html
<button type='button' id='button1'>button 1</button>
<button type='button' id='button2'>button 2</button>
css
.pushed {
background-color: salmon;
}
js
$('#button1').click(function () {
$('#button2').toggleClass('pushed');
});
$('.pushed').click(function () {
alert('pushed!')
});
Feel free to test it out here: https://jsfiddle.net/tk9pt3o2/