“.on()”动作监听器似乎停止工作

时间:2013-04-08 20:33:25

标签: javascript jquery

我想我会从link to a jsfiddle of my project

开始

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

基本上它有三个“线”,顶部用选择器框表示。每条线都有不同数量的“部件”,显示在左侧边栏上。选择零件后,表格会向上滑动以输入信息(但现在可以忽略)。提交后,应将新的“工作”添加到列表中。到目前为止一切正常。

切换线条时出现问题。出于某种原因,每当我从默认的第一行切换行时,我就不能再将作业添加到列表中。我的.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;
}

1 个答案:

答案 0 :(得分: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(),您将处理程序直接附加到初始按钮集。一旦这些被替换,处理程序就会丢失。