zdarzeniach wyzwalanych przez dynamicznie generowanych elementu nie są ujęte przez obsługi zdarzeń

Question

mam <div> z id="modal" generowane dynamicznie metodą jQuery load():

$('#modal').load('handlers/word.edit.php'); 

word.edit.php zawiera kilka elementów napędowych, które są ładowane do modalnej <div> .

Korzystanie keyup metody jQuery mogę uchwycić wartości wejściowe po pożarach zdarzeń, ale gdy elementy są dodawane dynamicznie do div modalnej, tym wydarzeniu żadnych pożarów llonger gdy użytkownik wprowadzi swój tekst.

Która metoda jQuery obsługuje obsługę zdarzeń wyzwalanych przez dynamicznie tworzone elementy?

Kod do tworzenia nowych elementów wejściowych wynosi:

$('#add').click(function() { 
    $('<input id="'+i+'" type="text" name="translations' + i + '" />') 
     .appendTo('#modal'); 

Kod do przechwytywania wartości użytkownika jest:

$('input').keyup(function() { 
    handler = $(this).val(); 
    name = $(this).attr('name'); 

Ten drugi blok kodu wydaje się działać dla oryginalnych elementów, ale nie jest on uruchamiany przez nowe dynamicznie generowane elementy.

Answer 1

Trzeba delegate the event do najbliższego statycznego elementu przodka w obrębie strony (patrz także "Understanding Event Delegation"). Oznacza to po prostu, że element, w którym wiąże się program obsługi zdarzeń, musi już istnieć w momencie, gdy program obsługi jest powiązany, więc w przypadku dynamicznie generowanych elementów należy zezwolić, aby zdarzenie wywołało bańki w górę i obsłużyło je dalej.

Metoda jQuery .on jest sposobem na zrobienie tego (lub .delegate dla starszych wersji jQuery.)

// If version 1.7 or above 

$('#modal').on('keyup', 'input', function() { 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
}); 

Albo w starszych wersjach

// If version 1.6 or below 

// note the selector and event are in a different order than above 
$('#modal').delegate('input', 'keyup', function() 
{ 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
}); 

Answer 2

Dzieje się tak, ponieważ dodajesz element wejściowy po podłączyłeś wydarzenie. Spróbuj .on:

$('body').on('keyup', 'input', function() { 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
}); 

Korzystanie .on zadba zdarzenie keyup jest podłączony do wejść, które są na stronie pierwotnie, jak również te, które są dodawane później dynamicznie.

Answer 3

Gdy dynamicznie zmieniasz DOM, jQuery nie dołącza do nich programów obsługi zdarzeń. Trzeba użyć on() and delegated events

za przedmioty wejściowych, trzeba coś takiego:

$("<parentSelector>").on("keyup", "input", function() { 
    handler = $(this).val(); 
    name = $(this).attr('name'); 
}) 

Jeżeli parentSelector jest czymś wyższym niż w DOM elementu wejściowego, a element, który istnieje na stronie obciążenia , może identyfikator formularza lub coś takiego.

Answer 4

Powiązania funkcji są wykonywane podczas ładowania strony. Do pracy nad elementami tworzonymi dynamicznie za pomocą funkcji live(). Przykład:

$ ("p"). live ("click", function() { 
    // Your function 
}); 

Answer 5

Jeśli trzeba uchwycić zmiany dla wszystkich elementów formy, zwłaszcza wybranych polach, wiem, że nie są tutaj wymienione, ale warto wiedzieć , należy użyć następującego kodu:

$(document).on('change', ':input', function() { 
    alert('value of ' + $(this).attr('name') + ' changed') 
}); 

ta powinna obejmować wszystkie input, textarea, select, checkbox, radio, itp.