class made with toggleClass() doesn't alert on click event

Question

Another toggleClass() problem. There are dozens question about this jQuery function but I could not find this specific one.

I have 2 buttons. One toggles the class of the other on click. This works fine since the colour changes, however when I use a click() event on the 'new' 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!')
});

you can try it here: https://jsfiddle.net/tk9pt3o2/

@Rob the edit is not correct... the color changes, the problem is that it does not alert 'pushed' — skamsie, Jul 16 '16 at 21:52

score 2 · Accepted Answer · answered Jul 16 '16 at 21:53

2

Because you select the element with .pushed before even exists. Try to use this:

$(document).on('click', '.pushed',function () {
  alert('pushed!')
});

on will bind the click event to the current matched elements and future matched elements.

answered Jul 16 '16 at 21:53

Ismail RBOUH

10,292
2
24
36

yes, makes sense... exactly what I needed, thanks! – skamsie Jul 16 '16 at 21:58

score 0 · Answer 2 · answered Jul 16 '16 at 22:00

0

Consider that you can just register event for an existing Dom elements. the key point is $('.pushed') return jquery object with no element to register the event on it.

answered Jul 16 '16 at 22:00

r0ck

173
12

class made with toggleClass() doesn't alert on click event

2 Answers2