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

Question

I guess I will start out with a link to a jsfiddle of my project

I am going to explain how it should work and my main problem.

Basically it has three "lines" depicted at the top by a selector box. Each line has a varying amount of "parts" which show up on the left sidebar. When a part is selected, a form slides up to enter information (but for now can be ignored). Upon submit, a new "job" should be added to the list. This all works fine so far.

My problems come when I switch lines. For some reason, whenever I switch lines from the default first line, I can no longer add jobs to the list. My .on() listener just stops recognizing that I am clicking buttons at all.

Basically I am a engineering student working on his senior design project and had to teach myself all of this web programming stuff because it is what the client wanted (even if it is not totally within my domain expertise). Anyways, I know this is a long question and so people will not be as inclined to help me out, but I cannot describe how appreciative I will be. As there are a few hundred lines of code I will answer any questions I can.

Here are the parts of the code that I think may be 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;
}

Answer 1

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 to bind to a stable parent element so that when the buttons all change you still respond to events. By using .find(), you were attaching handlers directly to the initial set of buttons. Once those were replaced, the handlers were lost.