Javascript A"；。on（）；动作监听器似乎停止工作了

我想我会从一个

我将解释它应该如何工作以及我的主要问题

基本上，它有三条“线”，在顶部由一个选择器框描绘。每行都有不同数量的“部分”，显示在左侧栏上。选择一个零件后，表单会向上滑动以输入信息（但目前可以忽略）。提交后，应向列表中添加新的“作业”。到目前为止，这一切都很好

当我换线路时，我的问题就来了。出于某种原因，每当我从默认的第一行切换行时，我就不能再将作业添加到列表中。我的.on（）监听器完全没有意识到我在单击按钮

基本上，我是一名从事高级设计项目的工科学生，必须自学所有这些网络编程知识，因为这是客户想要的（即使这不完全在我的专业领域内）。无论如何，我知道这是一个很长的问题，所以人们不会愿意帮助我，但我无法描述我会有多感激。由于有几百行代码，我将回答我能回答的任何问题

以下是我认为可能相关的代码部分：

$('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;
}

这：

应该是：

$('ul#parts').on('click', 'button', function(){
  ADDUPDATETOGGLE = "ADD";
  CSPC = $(this).attr("data-part");
  showForm();
});

---

您希望绑定到一个稳定的父元素，这样当按钮全部更改时，您仍然可以响应事件。通过使用

.find（）

，您可以将处理程序直接附加到初始按钮集。一旦更换了，处理器就丢失了。

非常感谢！成功了。如果我可以问的话，区别是什么？@TimoLoescher区别在于最初在某些节点上设置了处理程序，然后删除了节点。Pointy的技术使用事件委派，通过侦听“稳定”父元素上的事件，即父元素永远不会从DOM中移除，因此事件处理程序始终处于启用状态，因为事件从动态子节点冒泡而来。这里有一个很好的链接，可以了解event delegation@timolescher。区别在于，三个参数“.on”设置事件，以便在事件实际发生时确定事件目标。

$('ul#parts').on('click', 'button', function(){
  ADDUPDATETOGGLE = "ADD";
  CSPC = $(this).attr("data-part");
  showForm();
});