jQuery: Event propagation & amp; actions


Sorry for the wrong title.

JSFiddle Link


I have 2 events attached to the same element that has different classes depending on it's state.

The first click event adds an expanded class and change it's text (for visibility purposes only).

The second click event is attached to the element modified by expanded class.

The Problem:

The second click event never fires. Doesn't remove the class and changes the text.

If you try it without event.stopPropagationit instantly fires both first & second click events, with first one doesn't do any visual change to the element.


$('button').click(function() {
    $(this).text('Expanded class added');
$(document).on('click','button.expanded', function() {
    $(this).text('Expanded class removed')

The question: How do I properly execute the click events with both of them doing what they are supposed to?

  1. Bind event on button
  2. Check if the clicked button has class expanded, if present remove it else add it.
  3. Update the innerText of the clicked element. The ternary operator used $(this).hasClass('expanded') ? "added" : "removed") will return "added" if the button has class expanded added(in second step), otherwise returns "removed".


$(document).on('click', 'button', function () {
    $(this).toggleClass('expanded') // Toggle `expanded` class of the clicked button
        .text('Expanded class ' + ($(this).hasClass('expanded') ? "added" : "removed")); // Update text


EDIT: for the fun, to set the text button content, you can use CSS pseudo elements:

$(document).on('click','button', function() {
button:not([class]):before {
  content: "Click me"
button.expanded:after {
  content: "added";
button[class]:not(.expanded):after {
  content: "removed";
button[class]:before {
  content: "Expanded class "
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>