Kopiuj
$('#roleDropdown').on("change", callback)
a nie
Kopiuj
$('body').on("change", '#roleDropdown', callback)
Czy to jakaś forma event delegation w jquery?
Pierwsza wersja przypisuje event bezpośrednio do znacznika z selektora (może to być ID, klasa, dowolny selektor css), natomiast druga wersja bezpośrednio do body i różnica polega na tym, że jeśli skasujemy dany znacznik z DOM i dodamy go jeszcze raz od nowa
Kopiuj
$('#roleDropdown`).remove();
$('body').append('<div id="roleDropdown"></div>');
document.querySelector('#roleDropdown').remove();
const div = document.createElement('div');
div.id = 'roleDropdown';
document.body.append(div);
to jeśli skorzystaliśmy z pierwszej wersji
Kopiuj
$('#roleDropdown').on("change", callback)
roleDropdown.addEventListener('change', callback);
to przypięty event nam "przepadnie" i przy stworzeniu nowy znacznik nie będzie posiadał żadnych eventów. Trzeba będzie dodać je jeszcze raz od nowa.
Przy drugim sposobie event nie zostaje skasowany, ponieważ przypisaliśmy go gdzieś wyżej w strukturze DOM.
Kopiuj
$('body').on("change", '#roleDropdown', callback)
document.body.addEventListener('change', function (event) {
if (event.target.id === 'roleDropdown') {
callback(event);
}
})
Metoda filter wykonuje dostarczoną funkcję callback dla każdego elementu tablicy, tworząc nową tablicę z wszystkich tych elementów, dla których funkcja callback zwróciła wartość true.
.