2015-06-06 7 views
8

मैं जावास्क्रिप्ट का उपयोग कर चेकबॉक्स बना रहा हूं, onchange श्रोता उन्हें जोड़ रहा हूं और उन्हें लूप का उपयोग करके एक div में जोड़ रहा हूं। हालांकि, केवल अंतिम चेकबॉक्स में ईवेंट श्रोता पंजीकृत है।इवेंट श्रोता केवल लूप के लिए बनाए गए अंतिम तत्व पर क्यों पंजीकृत होता है?

ऐसा क्यों हो रहा है?

var div = document.getElementById("mydiv"); 
 
for (var i = 0; i < 5; i++) { 
 
    div.innerHTML += ("<br>" + i); 
 
    var input = document.createElement("input"); 
 
    input.type = "checkbox"; 
 
    input.onchange = function() { 
 
     alert("foo"); 
 
    }; 
 
    div.appendChild(input); 
 
}
<div id="mydiv"></div>

उत्तर

8

Element.innerHTML संपत्ति मौजूदा ईवेंट हैंडलर्स को हटा क्योंकि यह वास्तव में यह क्या कर रहा है का उपयोग कर div को जोड़ ...

div.innerHTML = (div.innerHTML + '<br>' + i); 

तो यह पूरी तरह से एचटीएमएल और सभी घटना का पुनर्लेखन हैंडलर खो गए हैं।

इसके बजाय Document.createElement() और Document.createTextNode() का उपयोग करें।

var div = document.getElementById("mydiv"); 
 
for (var i = 0; i < 5; i++) { 
 
    div.appendChild(document.createElement('br')); 
 
    div.appendChild(document.createTextNode(i)); 
 
    var input = document.createElement("input"); 
 
    input.type = "checkbox"; 
 
    input.onchange = function() { 
 
     alert("foo"); 
 
    }; 
 
    div.appendChild(input); 
 
}
<div id="mydiv"></div>

संबंधित मुद्दे