5

我想我将从一个指向我项目的 jsfiddle 的链接开始

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

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

当我换线时，我的问题就来了。出于某种原因，每当我从默认的第一行切换行时，我就无法再将作业添加到列表中。我的 .on() 监听器只是停止识别我正在单击按钮。

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

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

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

1 回答 1

6

这：

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

应该：

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

您希望绑定到一个稳定的父元素，以便当按钮全部更改时您仍然可以响应事件。通过使用.find()，您将处理程序直接附加到初始按钮集。一旦这些被替换，处理程序就丢失了。

于 2013-04-08T20:37:18.690 回答