javascript - Unable to interact with element after class change -

this question has answer here:

• event binding on dynamically created elements? 19 answers

im sure common problem when dealing javascript, can't seem find solution it.

im trying create 2 functions on "card", differentiated class of state of card.

one function "start" card , 1 function "remove" card. when start card, im not able remove same function.

jsfiddle example

html

<div class="card started">click hide</div> <div class="card not-started">click start</div> 

js

$(".card.not-started").on("click", function () {     $(this).removeclass("not-started").addclass("started").html("click hide"); });  $('.card.started').on("click", function () {     $(this).fadeout(); }); 

http://jsfiddle.net/wm99z4sj/1/

$(document).on("click", ".card.not-started", function () {     $(this).removeclass("not-started").addclass("started").html("click     hide"); });  $(document).on("click",'.card.started', function () {     $(this).fadeout(); }); 

try this. if use document parent elements of class added @ runtime.