[JavaScript]Nie działa onclick po dodaniu nowego elementu Opcje

[Warmix]

[JAVASCRIPT] pobierz, plaintext 
            var element = document.createElement('div');
            element.id = 'button_start';
            element.style.width = '40px';
            element.style.height = '40px';
            element.style.backgroundColor = '#CCCCCC';
            element.style.top = '5px';
            element.style.right = '5px';
            element.style.position= 'absolute';
            element.style.margin = '0 auto';
            element.innerHTML = '<div id="tekst" style="text-align: center;">B</div>';
 
            var body = document.getElementsByTagName('div')[2];
            //body.appendChild(element);
            $(body).append(element);
 
            $(document).on("click", "#button_start", function(){
                alert("test");
            });
[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 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

[JAVASCRIPT] pobierz, plaintext 
          var body = $("div")[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>");
 
            $(document).on("click", "#button_start", function(){
                alert("test");
            });
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Warmix 12.03.2017, 21:34:10

[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]

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

var body = $("div")[2]

bo jeżeli dam

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

Ten post edytował Warmix 12.03.2017, 21:42:54

[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ś