Java Script Button.onclick doesnt'work if wrapped in div-CodePudding

In my project I need to create button dynamically. I wrap it to div and this div is appended to container called tableDoc. My problem is that in this case onclick function doesn't work.
If my button is appended straight to tableDoc with not being wrapped to div before it works fine.

Could you tell me why onclick function doesn't work if wrapped to div?

Example with button wrapped to div before being added to tableDoc:

 Elements.map(item=>{
           
            const div=document.createElement('div');
            ///////adding button////////////////
            var deleteButton = document.createElement("button");

            deleteButton.setAttribute('type','button');
            deleteButton.setAttribute('class',"btn-close");
            deleteButton.setAttribute('aria-label','Close');
            deleteButton.setAttribute('id',item.pk);
            deleteButton.onclick = function() { 
            alert("blabla");
          };
            //////////////////////////////////////////////////////
            div.innerHTML =item.fields.car '  ' item.fields.model
            div.appendChild(deleteButton); 
            tableDoc.appendChild(div);
            div.innerHTML ='<br>'


            })

secondary example with button added straight to tableDoc:

Elements.map(item=>{
           
            const div=document.createElement('div');
            ///////adding button////////////////
            var deleteButton = document.createElement("button");

            deleteButton.setAttribute('type','button');
            deleteButton.setAttribute('class',"btn-close");
            deleteButton.setAttribute('aria-label','Close');
            deleteButton.setAttribute('id',item.pk);
            deleteButton.onclick = function() { 
            alert("blabla");
          };
            //////////////////////////////////////////////////////
            div.innerHTML =item.fields.car '  ' item.fields.model
            tableDoc.appendChild(deleteButton);
            tableDoc.appendChild(div);
            div.innerHTML ='<br>'


            })

CodePudding user response：

You remove the event listener by using div.innerHTML ='<br>'.

In the below example, I am creating 2 buttons and append them to 2 divs. The only difference here is that afterwards, I use innerHTML on one of the divs which causes the button to lose its event listener.

That's because innerHTML is a text based function and doesn't carry event listeners with. It operates only on the string representation of the node.

const fooButton = document.createElement('button')
fooButton.onclick = () => console.log("foo")
fooButton.textContent = "foo"
document.getElementById("foo").append(fooButton)

const barButton = document.createElement('button')
barButton.onclick = () => console.log("bar")
barButton.textContent = "bar"
document.getElementById("bar").append(barButton)
document.getElementById("bar").innerHTML  = '<br>'

<div id="foo"></div>
<div id="bar"></div>