मैं जावास्क्रिप्ट के साथ प्रयोग कर रहा था और मैंने देखा कि जब आप एकाधिक क्लिक ईवेंट श्रोता जोड़ते हैं, भले ही अन्य अन्य HTML ऑब्जेक्ट्स पर हों, यह अन्य सभी ईवेंट श्रोताओं को हटा देता है। उदाहरण के लिए:
var bttns = document.getElementById("bttns")
var bttnText = `
<span id="clickMe{}">Click Me!</span><br>
`
var num = 0
class clickMe {
constructor() {
this.id = num
num = num + 1
this.text = bttnText.replace("{}", this.id)
bttns.innerHTML = bttns.innerHTML + this.text
this.element = document.getElementById("clickMe" + this.id)
this.element.addEventListener("click", function() {
console.log("Hello")
})
}
}
new clickMe()
new clickMe()
new clickMe()
new clickMe()#bttns span {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<div id="bttns">
</div>उपरोक्त उदाहरण में, वर्ग clickMe अपनी आईडी से एक नया <span> बनाता है और एक ईवेंट श्रोता जोड़ता है। हालाँकि यदि आप इसे चलाते हैं, तो केवल अंतिम निर्मित clickMe ही ईवेंट श्रोता के साथ काम करता है। क्या उन सभी के साथ काम करने का कोई तरीका है?
1 उत्तर
जैसा कि @Robin द्वारा उत्तर दिया गया है, innerHTML का उपयोग आपकी अपेक्षानुसार काम नहीं कर रहा है क्योंकि DOM तत्वों को हटा दिया जाता है और फिर फिर से बनाया जाता है, ईवेंट श्रोता जो पहले उनमें जोड़े गए थे, वे अब मौजूद नहीं हैं।< /मजबूत>
अब इसे WORK बनाने के कई तरीके हैं लेकिन फिर भी यदि आप जोड़ने DOM नोड्स के बजाय html स्ट्रिंग मार्ग पर जाना चाहते हैं , आप इस तरह insertAdjacentHTML(...) का उपयोग कर सकते हैं: -
var bttns = document.getElementById("bttns")
var bttnText = `
<span id="clickMe{}">Click Me!</span><br>
`
var num = 0
class clickMe {
constructor() {
this.id = num
num = num + 1
this.text = bttnText.replace("{}", this.id)
bttns.insertAdjacentHTML('beforeend',this.text);
// The below will work as well
// bttns.insertAdjacentHTML('afterbegin',this.text);
this.element = document.getElementById("clickMe" + this.id)
this.element.addEventListener("click", function() {
console.log("Hello")
})
}
}
new clickMe()
new clickMe()
new clickMe()
new clickMe()#bttns span {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<div id="bttns">
</div>