获取单击元素的类名

Question

I have some dynamically created divs . And when the user clicks on the screen I want to check if it was on one of the dynamically created divs.But it doesnt seem to work. I already have a window.addeventListener but that too is not working for the dynamically created divs.

            var divk = document.createElement("div");
            divk.className="divk";
             window.addEventListener('click', function(e){
                if (document.getElementById('outside_click_purpose').contains(e.target)){
                    currentItem = e.target;
                    if (currentItem.classList.contains("divk")) {
                      alert("contains !!!");
                    }
                }
           });

Answer 1

I think you need to use event delegation then use matches

Notice how we use

e.target.matches('.dynamic')

To check for the presence of our class, we can use any valid css selector

For example, if we wanted to ensure it was a div:

e.target.matches('div.dynamic');

See the demonstration below:

 // Add some dynamic divs const getDiv = (content) => { const div = document.createElement('div'); div.className = 'dynamic'; div.innerHTML = content; return div; }; const setMessage = (msg) => document.querySelector('.clicked').innerText = msg; document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('#container'); for(let i = 0; i< 10; i++) { container.appendChild(getDiv(`Dynamic ${i}`)); } }); // Use event delegation document.addEventListener('click', (e) => { if(e.target.matches('.dynamic')) { setMessage(`Clicked a dynamic div - text ${e.target.innerText}`); } else { setMessage('Click was not on dynamic'); } }); 

 .clicked { height: 20px; border: 1px solid red; } .manual { background-color: blue; color: white; } 

 <div class="clicked"></div> <div class="manual">Manual</div> <div class="manual">Manual</div> <div id="container"></div>