A「對（）」動作監聽器似乎停止工作

我想我會開始了一個link to a jsfiddle of my project A「對（）」動作監聽器似乎停止工作

，我要解釋它如何工作，我的主要問題。

基本上它具有在由選擇框的頂部描繪三「線」。每條線都有不同數量的「零件」，它們顯示在左側邊欄上。選擇一個零件時，表格會上下滑動以輸入信息（但現在可以忽略）。提交後，應該在列表中添加一個新的「工作」。迄今爲止這一切都很好。

我的問題來了，當我轉線。出於某種原因，無論何時從默認的第一行切換行，我都無法再將作業添加到列表中。我的.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; 
}

來源

2013-04-08 Timo Loescher

此：

$('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-08 20:37:18 Pointy

非常感謝！這工作。如果我可以問，有什麼區別？ – 2013-04-08 20:39:48

@TimoLoescher不同之處在於您最初在某些節點上設置處理程序，然後刪除了這些節點。 Pointy的技術使用事件委託，通過在「穩定的」父元素上監聽事件，也就是說，該父元素永遠不會從DOM中移除，所以事件處理程序始終打開，因爲事件從動態子節點。這裏有一個很好的鏈接，瞭解事件委託http://lab.distilldesign.com/event-delegation/ – 2013-04-08 20:39:57

@TimoLoescher不同的是，三參數「對」進行一些設置，使得事件目標是想通了的時候事件實際上發生了。 – Pointy 2013-04-08 20:41:20

A「對（）」動作監聽器似乎停止工作

回答

相關問題