A ".on()" ascoltatore azione sembra smettere di lavorare

Question

Credo che inizierò con un link to a jsfiddle of my project

ho intenzione di spiegare come dovrebbe funzionare e il mio problema principale.

Fondamentalmente presenta tre "linee" rappresentate nella parte superiore da una casella di selezione. Ogni riga ha una quantità variabile di "parti" che appaiono nella barra laterale di sinistra. Quando una parte è selezionata, un modulo scorre verso l'alto per inserire le informazioni (ma per ora può essere ignorato). Al momento dell'invio, un nuovo "lavoro" dovrebbe essere aggiunto alla lista. Tutto funziona bene finora.

I miei problemi arrivano quando cambio linea. Per qualche ragione, ogni volta che cambio linea dalla prima riga predefinita, non posso più aggiungere lavori all'elenco. Il mio ascoltatore .on() si limita a riconoscere che sto facendo clic sui pulsanti.

Fondamentalmente sono uno studente di ingegneria che lavora al suo progetto di progettazione senior e ha dovuto insegnarmi tutto questo materiale di programmazione Web perché è ciò che il cliente voleva (anche se non è totalmente all'interno della mia esperienza di dominio). Ad ogni modo, so che questa è una lunga domanda e quindi le persone non saranno inclini ad aiutarmi, ma non posso descrivere quanto sarò riconoscente. Dato che ci sono poche centinaia di righe di codice, risponderò a tutte le domande che posso.

Qui sono le parti del codice che penso possa essere rilevante:

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

questo:

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

dovrebbe essere:

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

Si vuole legarsi ad una elemento genitore stabile in modo che quando tutti i pulsanti cambiano, rispondi ancora agli eventi. Utilizzando .find(), si collegavano i gestori direttamente al set iniziale di pulsanti. Una volta sostituiti, gli handler sono stati persi.