Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Nie działa onclick po dodaniu nowego elementu
Forum PHP.pl > Forum > Przedszkole
Warmix
[JAVASCRIPT] pobierz, plaintext
  1. var element = document.createElement('div');
  2. element.id = 'button_start';
  3. element.style.width = '40px';
  4. element.style.height = '40px';
  5. element.style.backgroundColor = '#CCCCCC';
  6. element.style.top = '5px';
  7. element.style.right = '5px';
  8. element.style.position= 'absolute';
  9. element.style.margin = '0 auto';
  10. element.innerHTML = '<div id="tekst" style="text-align: center;">B</div>';
  11.  
  12. var body = document.getElementsByTagName('div')[2];
  13. //body.appendChild(element);
  14. $(body).append(element);
  15.  
  16. $(document).on("click", "#button_start", function(){
  17. alert("test");
  18. });
[JAVASCRIPT] pobierz, plaintext


Dlaczego po kliknięciu na ten nowo utworzony element i dodany do strony nie wywołuje się onclik i nie wyrzuca alertu: "test"?
trueblue
Być może dlatego, że pomieszałeś czysty JS oraz jQuery, a tego drugiego w ogóle nie dołączasz do strony.
Warmix
Nie można tak wymieszać JS i JQuery? Chciałem stworzyć i dodać element za pomocą JS, a samo kliknięcie obsłużyć JQuery sad.gif Zdecydować się na jedno czy mogę tak zrobić?

Co masz na myśli, że nie dołączyłem tego drugiego w ogóle do strony?

Przerobiłem na samo jQuery, niestety dalej nie działa sad.gif
[JAVASCRIPT] pobierz, plaintext
  1. var body = $("div")[2];
  2. $(body).append("<div class='teeen' id='button_start' style='width: 40px; height: 40px; background-Color: #CCCCCC; top: px; right: 5px, position: absolute; margin: 0 auto'><div id='tekst' style='text-align: center;'>B</div></div>");
  3.  
  4. $(document).on("click", "#button_start", function(){
  5. alert("test");
  6. });
[JAVASCRIPT] pobierz, plaintext
trueblue
Możesz mieszać, ale warto się zdecydować na jedną opcję, dla porządku.
Masz dołączoną bibliotekę jQuery?
Czy na stronie istnieją minimum 3 divy?
Sprawdź konsolę przeglądarki.
Warmix
Cytat(trueblue @ 12.03.2017, 21:33:25 ) *
Możesz mieszać, ale warto się zdecydować na jedną opcję, dla porządku.
Masz dołączoną bibliotekę jQuery?
Czy na stronie istnieją minimum 3 divy?
Sprawdź konsolę przeglądarki.


Wszystko jest w porządku. Bo ten element dodaje mi się na stronę, problem jest tylko przy tym, że gdy kliknę na niego, to nic się nie dzieje, a powinien wyskoczyć alert. Problemem jest na pewno
Cytat
var body = $("div")[2]
bo jeżeli dam
Cytat
$("body").append(
to fakt, dodaje mi się element nie w tym miejscu co potrzeba, ale wtedy alert działa. Co może być powodem błędu?
trueblue
Sprawdziłeś punkt 3?
Warmix
Istnieją, na pewno. Zmiana np. z "[2]" na "[1]" albo "[3]" zmienia mi tylko położenie, ale nie istotne co tam dam, niestety wciąż nie działa alert sad.gif
trueblue
Sprawdź dokumentacją funkcji "on" i wersję jQuery jaką dołączasz.
Sprawdź konsolę przeglądarki.
Warmix
Operuję w Tampermonkey w Google chrome. Ma to jakieś znaczenie w związku z tym, że nie chce to działać?
trueblue
W Google Chrome konsola jest pod F12->Console.
Warmix
Znalazłem błąd. Problemem wydaje mi się być to, że append dodaje przed danego diva, wprawdzie mój dodany jest widoczny, ale mam wrażenie, że przez to, że ten drugi go przykrywa, to one click przez to,że wyszukuje w całym 'document' to łapie tego diva za nim i nie wyłapuje click dla tego dodanego diva. Jak mogę to rozwiązać?
borabora
masz i testuj:
https://jsfiddle.net/7y0pxvb8/
po kliknieciu w ten dodany div pokazuje się alert. Byćmoże z resztą kodu na stronie coś namieszałeś
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.