A „.Na()” działanie słuchacz zdaje się przestać działać

Question

Chyba zacznę się z link to a jsfiddle of my project

mam zamiar wyjaśnić, jak to powinno działać, a moim głównym problemem.

Zasadniczo ma trzy "linie" przedstawione u góry za pomocą pola wyboru. Każda linia ma różną ilość "części", które pojawiają się na lewym pasku bocznym. Po wybraniu części formularz przesuwa się w górę, aby wprowadzić informacje (ale na razie można go zignorować). Po przesłaniu do listy należy dodać nowe "zadanie". Wszystko do tej pory działa dobrze.

Moje problemy pojawiają się, gdy przełączam linie. Z jakiegoś powodu, kiedy przełączam linie z domyślnego pierwszego wiersza, nie mogę już dodawać zadań do listy. Mój słuchacz .on() przestaje rozpoznawać, że klikam przyciski w ogóle.

Zasadniczo jestem studentem inżynierii, pracującym nad jego starszym projektem projektowym i musiałem uczyć się tego całego oprogramowania do programowania stron internetowych, ponieważ jest to to, czego żądał klient (nawet jeśli nie jest to całkowicie w mojej dziedzinie wiedzy). Tak czy inaczej, wiem, że to jest długie pytanie, więc ludzie nie będą tak skłonni mi pomóc, ale nie potrafię opisać, jak bardzo będę wdzięczny. Ponieważ istnieje kilkaset linii kodu, odpowiem na wszystkie pytania.

Oto fragmenty kodu, które moim zdaniem mogą być istotne:

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

to:

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

powinno być:

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

Chcesz wiązać się z stabilny element nadrzędny, aby po zmianie wszystkich przycisków nadal odpowiadać na zdarzenia. Korzystając z .find(), dołączasz programy obsługi bezpośrednio do początkowego zestawu przycisków. Po ich wymianie handlerki zostały utracone.