जब मैं आइटम पर क्लिक करता हूं तो यह क्लिक किया गया तत्व दिखाता है लेकिन एक नया आइटम बनाने के बाद यह नए आइटम के लिए काम नहीं कर रहा है।
मुझे पता है कि यह पहले आइटम चयनकर्ता let items = document.querySelectorAll('.item'); के लिए हो रहा है, यह केवल तत्वों को रखता है जब नए आइटम बनाने के बाद पेज लोड होता है, यह आइटम चयनकर्ता को प्रभावित नहीं करता है। लेकिन मुझे इसे ठीक करने की जरूरत है। अगर मैं नए आइटम बनाता हूं तो इसे सभी वस्तुओं (पुराने और नए दोनों) के लिए काम करना चाहिए।
//for some stuff..
let
items = document.querySelectorAll('.item');
items.forEach( (elm) =>{
elm.addEventListener('click', ()=>{
console.log(
elm.innerText
);
})
});
//create new one
let
btn = document.querySelector('button'),
app = document.querySelector('.app-view'),
dataId = 0;
btn.addEventListener('click', ()=>{
dataId++;
let
newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerHTML = `I am from planet ${dataId}`;
app.insertAdjacentElement ('beforeend', newItem);
});.item{
padding: .25rem 1rem;
font-family: "Helvetica";
color: purple;
user-select:none;
}
.item:hover{
cursor: default;
border: 1px dotted #000;
}
.default-item{
color: #007bff;
}
button{
position: fixed;
top: 1rem;
right: 1rem;
padding: .5rem 1rem;
}<div class="app-view">
<div class="item default-item">Default Item</div>
</div>
<button>
Create New
</button>2 जवाब
घटना प्रतिनिधिमंडल का उपयोग करने पर विचार करें:
const itemContainer = document.querySelector('.app-view');
itemContainer.addEventListener('click', event => {
if (event.target.classList.contains('item') {
// do stuff
}
});
ध्यान दें कि इसे event.target का इस्तेमाल करना चाहिए (क्लिक किया गया तत्व), नहीं event.currentTarget (वह तत्व जिससे श्रोता जुड़ा हुआ है)।
आप इस ब्लॉग पोस्ट में अधिक जानकारी प्राप्त कर सकते हैं: JavaScript ईवेंट प्रतिनिधिमंडल कैसे काम करता है
ईवेंट प्रतिनिधिमंडल आपको ईवेंट श्रोताओं को विशिष्ट नोड्स में जोड़ने से बचने की अनुमति देता है; इसके बजाय, ईवेंट श्रोता को एक पैरेंट में जोड़ा जाता है। वह घटना श्रोता बाल तत्वों पर एक मैच खोजने के लिए बबल की घटनाओं का विश्लेषण करता है
document.querySelector('#your-app-root') या यहां तक कि document.body जैसा कुछ भी हो सकता है।
एक ईवेंट श्रोता को प्रत्येक newItem के बनाए जाने पर संलग्न करने की आवश्यकता होती है।
मैंने इसे एक फ़ंक्शन में स्थानांतरित कर दिया है ताकि कोड का पुन: उपयोग किया जा सके।
//for some stuff..
let items = document.querySelectorAll('.item');
items.forEach((elm) => {
bindClickEvent(elm); // Attach event to existing items
});
function bindClickEvent(elm) {
elm.addEventListener('click', () => {
console.log(
elm.innerText
);
})
}
//create new one
let btn = document.querySelector('button'),
app = document.querySelector('.app-view'),
dataId = 0;
btn.addEventListener('click', () => {
dataId++;
let newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerHTML = `I am from planet ${dataId}`;
app.insertAdjacentElement('beforeend', newItem);
bindClickEvent(newItem); // Attach event to new item
});.item {
padding: .25rem 1rem;
font-family: "Helvetica";
color: purple;
user-select: none;
}
.item:hover {
cursor: default;
border: 1px dotted #000;
}
.default-item {
color: #007bff;
}
button {
position: fixed;
top: 1rem;
right: 1rem;
padding: .5rem 1rem;
}<div class="app-view">
<div class="item default-item">Default Item</div>
</div>
<button>
Create New
</button>
.itemsमेंeventListenerजोड़ना भूल गए