asp.net - Javascript add event listener in a foreach loop only last entry works - Stack Overflow

admin管理员组

文章数量:1405614

I have a function which goes through an Array and adds <h3> elements to a div. Then it adds an event listener (an onclick) to the current <h3> element, but only the last element which goes through the function is set by the onclick.

var runstr = [];

//txt es from the content of a tab separated textfile spilt by '\n'
txt.forEach(function (lcb) { //lcb goes through each line of txt
    lcb = lcb.split("   ", 30); //split the line by tab
    //MainContent_Infralist is a div where the <h3> elements are listed and lcb[2] is the title
    document.getElementById("MainContent_Infralist").innerHTML = 
        document.getElementById("MainContent_Infralist").innerHTML + 
        '<h3 class="Infraa" id="' + "Infralist_" + lcb[2] + '">' + lcb[2] + '</h3>';
    //I put the id into an array to get the index of the marker later
    runstr.push("Infralist_" + lcb[2]);

    //I'm working with openlayers here i try to set the entry of 
    //the list.onlick to trigger a mousedown on a marker.
    //And there is the problem: It works, but only for the last entry of my <h3> list...
    document.getElementById("Infralist_" + lcb[2]).onclick = function () {
        var theM = runstr.indexOf("Infralist_" + lcb[2]);
        markers.markers[theM].events.triggerEvent('mousedown');
    };
};

I have a function which goes through an Array and adds <h3> elements to a div. Then it adds an event listener (an onclick) to the current <h3> element, but only the last element which goes through the function is set by the onclick.

var runstr = [];

//txt es from the content of a tab separated textfile spilt by '\n'
txt.forEach(function (lcb) { //lcb goes through each line of txt
    lcb = lcb.split("   ", 30); //split the line by tab
    //MainContent_Infralist is a div where the <h3> elements are listed and lcb[2] is the title
    document.getElementById("MainContent_Infralist").innerHTML = 
        document.getElementById("MainContent_Infralist").innerHTML + 
        '<h3 class="Infraa" id="' + "Infralist_" + lcb[2] + '">' + lcb[2] + '</h3>';
    //I put the id into an array to get the index of the marker later
    runstr.push("Infralist_" + lcb[2]);

    //I'm working with openlayers here i try to set the entry of 
    //the list.onlick to trigger a mousedown on a marker.
    //And there is the problem: It works, but only for the last entry of my <h3> list...
    document.getElementById("Infralist_" + lcb[2]).onclick = function () {
        var theM = runstr.indexOf("Infralist_" + lcb[2]);
        markers.markers[theM].events.triggerEvent('mousedown');
    };
};

• javascript
• asp
• loops
• event-listener

Share Improve this question Follow edited Sep 10, 2013 at 20:46 john_science 6,56766 gold badges4545 silver badges6161 bronze badges asked Sep 10, 2013 at 20:16 rudibrudib 22711 silver badge1111 bronze badges 1

• @kamituel You're right, I'm retracting the duplicate vote. – bfavaretto Commented Sep 10, 2013 at 20:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

The problem is here:

document.getElementById("MainContent_Infralist").innerHTML = 
     document.getElementById("MainContent_Infralist").innerHTML + 
     '<h3 class="Infraa" id="' + "Infralist_" + lcb[2] + '">' + lcb[2] + '</h3>';

Every time you assign to innerHTML, you're basically deleting all stuff and adding it all over again. This causes all event listeners to break.

That's the reason why only last one works - it's the only one after assigning which there is no more innerHTML manipulation.

To fix this, create your elements using document.createElement() and append them using element.appendChild().

It could look like:

var header = document.createElement('h3');
header.id = 'Infralist_' + lcb[2];
header.className = 'Infraa';
header.textContent = lcb[2];

document.getElementById('MainContent_Infralist').appendChild(header);

header.onclick = function () {
  // you function here
}

本文标签： aspnetJavascript add event listener in a foreach loop only last entry worksStack Overflow