After Set "classname" to Created button, how will that "class" can be called

Question

I got getting class "index" from data but the problem is that :

When I add new button, it doesnt call "class index" Whe I click it.. Where is the mistake?

 function addbutton(id) 
{
newtag = document.createElement("button");
newtag.classList.add("trying");
newtag.innerHTML = "WHen I button that button it doesnt call function grupla() function";
divarea = document.getElementById("kanban_1");
divarea.appendChild(newtag);
};


var elems = Array.from(document.querySelectorAll('.trying'));
elems.forEach(el => el.addEventListener('click', grupla));
function grupla() 
{
  var index = elems.indexOf(this);
  alert(index);
};

<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>
<button class="trying">Which Class</button>

<button onclick="addbutton(this.id)">add</button>

<div id="kanban_1"> </div>

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Jun 25 '21 at 10:32
There is a vanilla js answer in there, but you have tagged your question [tag:jquery] but not used jquery (in your code). — freedomn-m, Jun 25 '21 at 10:33
`this.id`? Your button doesn’t have an ID and `addbutton` doesn’t use the `id`. Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jun 25 '21 at 10:37
Use [event delegation](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Jun 25 '21 at 10:39

score 0 · Answer 1 · edited Jul 17 '21 at 12:40

0

The first comment you got was the answer: Event binding on dynamically created elements?.

You currently register the event listener for all existing .trying elements, but you must add an event listener which listens for new elements as well. Whether you do this with jQuery or not is up to you. Remove jQuery as tag then if you don't want it.

You also got a comment refering you to event delegation. Please click on links people give you. For example there is one tutorial link inside one of the links you probably want to read and implement (it is the pure JavaScript solution): How JavaScript Event Delegation Works

edited Jul 17 '21 at 12:40

halfer

19,824
17
99
186

answered Jun 25 '21 at 13:26

Peter Krebs

3,831
2
15
29

I am not pro friend.. So I will try to understand what you write one by one and than I vote up if I can otherwise.. this qnswer can be true for someone else but maybe not for me. – May Jun 25 '21 at 13:33
or maybe you can just write down quick code here.. and so this will helps all "pro" and "beginers" togerher.. – May Jun 25 '21 at 13:34
No it seems you let us do your homework. The links you received have the information you need. Writing your source code for you teaches you nothing. These are the basics. You have to walk through them yourself or pay someone to do this work for you. You can also just search on stackoverflow to find solutions just as yours. Apply them to your source code and learn something. – Peter Krebs Jun 25 '21 at 13:44
Dear Peter Krebs. thx for your helps thought... I wish it was that much simple that my homeworks, I have at least 6 months for my all software done but sometimes I locked in writing code... and really dont wanna lost time to read 20 commants to learn just a simple logic... it is up to you how much and how you will help or not.. anyway thx to you.. – May Jun 25 '21 at 14:23

score 0 · Answer 2 · answered Jun 25 '21 at 13:49

Since you are binding "click" event to buttons (which are having "trying" class) on load of the html page, newly added buttons(which were not there in page load) will not bind the "click" event.

One thing you can do is, binding the "click" event while you are adding the new button like below.

        function addbutton(obj) {
            newtag = document.createElement("button");
            newtag.classList.add("trying");
            newtag.innerHTML = "WHen I button that button it doesnt call function grupla() function";
            newtag.addEventListener('click', grupla)
            divarea = document.getElementById("kanban_1");
            divarea.appendChild(newtag);
        };


        var elems = Array.from(document.querySelectorAll('.trying'));
        elems.forEach(el => el.addEventListener('click', grupla));
        function grupla() {
            var index = elems.indexOf(this);

            alert(index);
        };

<button class="trying">Which Class</button>
    <button class="trying">Which Class</button>
    <button class="trying">Which Class</button>
    <button class="trying">Which Class</button>
    <button class="trying">Which Class</button>
    <button class="trying">Which Class</button>

    <button onclick="addbutton(this)">add</button>

    <div id="kanban_1"> </div>

Even though the "click" event is fireing for new buttons now,you will not have the expected index values. it will be always -1, since the "elems" array is creating while page loading and new buttons are not in your array at the time page loads.

After Set "classname" to Created button, how will that "class" can be called

2 Answers2

Linked