Javascript只在最后一个条目的foreach循环中添加事件监听器

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.

我有一个函数,它通过一个数组并将

元素添加到div。然后它将一个事件监听器(一个onclick)添加到当前的

元素,但只有通过该函数的最后一个元素由onclick设置。

var runstr = [];

//txt comes 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');
    };
};

1 个解决方案

#1

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.

每次分配到innerHTML时,你基本上都会删除所有内容并重新添加它。这会导致所有事件侦听器中断。

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

这就是为什么只有最后一个有效的原因 - 它是分配之后唯一一个没有更多innerHTML操作的原因。

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

要解决此问题,请使用document.createElement()创建元素,并使用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
}

#1