• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JS nie widzi "dynamicznie" stworzonych elementów

VPS Starter Arubacloud
0 głosów
734 wizyt
pytanie zadane 14 marca 2016 w JavaScript przez ormu16 Gaduła (4,980 p.)

Dlaczego gdy stworzę button w plku html z klasą "qc_remove_button" i zajdzie zdarzenie click w jquery to wszystko działa jak powinno, ale gdy zrobię to przez dodanie rodzicowi html('<div class="qc_remove_button"></div>') to już nic się nie dzieje?

function odd_qc_option() {
	var html = $('.qc_main').html();
	html = html + '<button class="qc_remove_button"">test</button>';
	$('.qc_main').html(html);
}

$('.qc_remove_button').click(function() {
	console.log("test");
})

 

2 odpowiedzi

0 głosów
odpowiedź 14 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 15 marca 2016 przez ormu16
 
Najlepsza

Klasę elementowi HTML w JS możesz dodać poprzez:

element.classList.add('nazwa-klasy');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Poza tym źle to robisz - sprawdź sobie po 3 linijce console.log(html); czy jest tam, co chcesz aby było. Pewnie nei będzie, bo element HTML w JavaScript tworzy się poprzez document.createElement('jakis-element'), potem jakis-element.createTextNode('jakis-tekst'); a na końcu parentElement.appendChild('jakis-element') - gdzie "jakis-element" to tag HTMLa, np. DIV, a, ul, li.

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

komentarz 14 marca 2016 przez ormu16 Gaduła (4,980 p.)
Chodzi ci o to aby najpierw tworzyć element a potem nadawać mu klasę?
komentarz 14 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
Tak. Bo elementy HTML to są obiekty DOM. Jeśli chcesz je dodawać dynamicznie poprzez JavaScript, to musisz je najpierw stworzyć - edytowałem swój post, dodałem informacje o tworzeniu elementów HTML w JS.
0 głosów
odpowiedź 14 marca 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)

Musisz na nowo przypisać zdarzenie click.

$('.qc_remove_button').click(function() {

W tym momencie przypisujesz zdarzenie wszystkim elementom z tą klasą, które aktualnie istnieją na stronie.

Gdy wstawisz nowy element przez .html() to do niego nie jest przypisane już to zdarzenie. Tak więc trzeba jeszcze raz je przypisać i będzie działać.

komentarz 14 marca 2016 przez ormu16 Gaduła (4,980 p.)
Jak przypisać na nowo? Chyba nie do końca rozumiem.
komentarz 14 marca 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)

Najprościej po prostu od nowa wywołać .click na elementach danej klasy.

Pozwolę sobie dla przykładu przerobić lekko Twój kod, tak będzie najprościej wytłumaczyć co mam na myśli

function test() {
    console.log("test");
}

function odd_qc_option() {
    var html = $('.qc_main').html();
    html = html + '<button class="qc_remove_button"">test</button>';
    $('.qc_main').html(html);
    $('.qc_remove_button').click(test);
}
 
$('.qc_remove_button').click(test);

 

komentarz 14 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Arkadiusz Waluk, a czy przypadkiem tworzenie elementów HTML w JS tak jak w powyższym kodzie nie jest niezalecane?

http://stackoverflow.com/a/2947012/4983840

W tym przypadku, mam na myśli to, co jest w akapicie "Preserves event handlers attached to any DOM elements". Czy akurat to nie pogarsza sytuacji w tym problemie?

1
komentarz 14 marca 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)
Sądzę, że lepiej zrobić to tak jak Ty podałeś (i jak jest w podanym linku) ale napisałem tutaj alternatywne rozwiązanie gdyby bardzo chciał to dalej robić przez .html(). Fakt, powinienem od razu napisać, że jest to nieco gorsza opcja. Umknęło mi to, sorki ;)

Podobne pytania

0 głosów
3 odpowiedzi 435 wizyt
pytanie zadane 31 lipca 2018 w JavaScript przez Wyshak Początkujący (260 p.)
0 głosów
2 odpowiedzi 349 wizyt
pytanie zadane 26 maja 2018 w JavaScript przez Rafał Masny Obywatel (1,700 p.)
0 głosów
1 odpowiedź 731 wizyt

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...