जब मैं आइटम पर क्लिक करता हूं तो यह क्लिक किया गया तत्व दिखाता है लेकिन एक नया आइटम बनाने के बाद यह नए आइटम के लिए काम नहीं कर रहा है।

मुझे पता है कि यह पहले आइटम चयनकर्ता 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>
1
Tahazzot 11 मई 2020, 17:07
आप नए जोड़े गए .items में eventListener जोड़ना भूल गए
 – 
blurfus
11 मई 2020, 17:11

2 जवाब

सबसे बढ़िया उत्तर

घटना प्रतिनिधिमंडल का उपयोग करने पर विचार करें:

const itemContainer = document.querySelector('.app-view');

itemContainer.addEventListener('click', event => {
  if (event.target.classList.contains('item') {
    // do stuff
  }
});

ध्यान दें कि इसे event.target का इस्तेमाल करना चाहिए (क्लिक किया गया तत्व), नहीं event.currentTarget (वह तत्व जिससे श्रोता जुड़ा हुआ है)।

आप इस ब्लॉग पोस्ट में अधिक जानकारी प्राप्त कर सकते हैं: JavaScript ईवेंट प्रतिनिधिमंडल कैसे काम करता है

ईवेंट प्रतिनिधिमंडल आपको ईवेंट श्रोताओं को विशिष्ट नोड्स में जोड़ने से बचने की अनुमति देता है; इसके बजाय, ईवेंट श्रोता को एक पैरेंट में जोड़ा जाता है। वह घटना श्रोता बाल तत्वों पर एक मैच खोजने के लिए बबल की घटनाओं का विश्लेषण करता है

3
Lionel Rowe 11 मई 2020, 17:22
लेकिन कभी-कभी इस स्थिति जैसे लक्षित तत्व तक पहुंचना इतना कठिन होता है...
< /div>
 – 
Tahazzot
11 मई 2020, 17:33
@ Md.Tahazzot मुझे यकीन नहीं है कि मैं उस उदाहरण को समझता हूं, लेकिन हां, इस विधि के लिए लक्ष्य तत्वों को एक सामान्य पूर्वज की आवश्यकता होती है। लेकिन वह पूर्वज हमेशा document.querySelector('#your-app-root') या यहां तक ​​कि document.body जैसा कुछ भी हो सकता है।
 – 
Lionel Rowe
12 मई 2020, 02:52

एक ईवेंट श्रोता को प्रत्येक 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>
1
Turnip 11 मई 2020, 17:12
1
अगर आप नए और पुराने आइटम के लिए एक इवेंट श्रोता चाहते हैं, तो लियोनेल का जवाब बेहतर होगा।
 – 
Turnip
11 मई 2020, 17:20
पहला वाला इतना सुविधाजनक नहीं है जितना कि आपका उत्तर। यह अधिक उपयोगी है और मैं इससे सीखता हूं धन्यवाद।
 – 
Tahazzot
7 सितंबर 2020, 07:23