javascript - A ".on()" action listener seems to stop working -

i guess start out link jsfiddle of project

i going explain how should work , main problem.

basically has 3 "lines" depicted @ top selector box. each line has varying amount of "parts" show on left sidebar. when part selected, form slides enter information (but can ignored). upon submit, new "job" should added list. works fine far.

my problems come when switch lines. reason, whenever switch lines default first line, can no longer add jobs list. .on() listener stops recognizing clicking buttons @ all.

basically engineering student working on senior design project , had teach myself of web programming stuff because client wanted (even if not totally within domain expertise). anyways, know long question , people not inclined me out, cannot describe how appreciative be. there few hundred lines of code answer questions can.

here parts of code think may relevant:

$('ul#parts').find('button').on('click', function(){   addupdatetoggle = "add";   cspc = $(this).attr("data-part");   showform(); });  $('select.linechoice').on('click', function(){   currentline = updatepartlist(currentline);   updatejoblist(joblistbyline[currentline]); });  function updatejoblist(newjoblist){   $("ul#jobs").html(newjoblist); }  function updatepartlist(currentline){   var   cline = $('select.linechoice').find('option:selected').attr('value'),         buttonarray = [['a5843', 'a5844', 'b3173', 'b3174', 'b3940', 'b4220', 'b6645', 'b6646', 'b6647', 'b6648', 'b6649', 'b6650', 'b7657', 'b7658', 'b7659', 'b7660'],         ['a2279', 'a2280', 'a4451', 'a4453', 'a4454', 'a6499', 'a6500', 'b0934', 'b0935', 'b3810', 'b3871', 'b5532', 'b5533', 'b5709'],         ['b0929', 'b0991', 'b1097', 'b3483', 'b3484', 'b3485', 'b6634', 'b7814']],         partlist =  $("ul#parts");   if ( cline == "g1" ){         currentline = 0;   }   else if( cline == "r1" ){         currentline = 1;   }   else if( cline == "bb3"){         currentline = 2;   }   else{         alert("line error");         currentline =  99;   }   partlist.html(buttonhtml(buttonarray[currentline]));   return currentline; } 

this:

$('ul#parts').find('button').on('click', function(){   addupdatetoggle = "add";   cspc = $(this).attr("data-part");   showform(); }); 

should be:

$('ul#parts').on('click', 'button', function(){   addupdatetoggle = "add";   cspc = $(this).attr("data-part");   showform(); }); 

you want bind stable parent element when buttons change still respond events. using .find(), attaching handlers directly initial set of buttons. once replaced, handlers lost.