1

配列を通過<h3>し、div に要素を追加する関数があります。次に、イベント リスナー ( onclick) を現在の<h3>要素に追加しますが、関数を通過する最後の要素のみが によって設定されます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');
    };
};
4

1 に答える 1

9

問題はここにあります：

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

に割り当てるたびにinnerHTML、基本的にすべてのものを削除して、もう一度追加します。これにより、すべてのイベント リスナーが壊れます。

これが、最後の 1 つだけが機能する理由です。これは、割り当て後にinnerHTML操作が行われない唯一のものです。

これを修正するには、document.createElement()を使用して要素を作成し、 element.appendChild()を使用してそれらを追加します。

次のようになります。

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
}
于 2013-09-10T20:20:06.410 に答える