0

要素をクリックすると起動しますが、もう一度クリックしても何も起こりません。ページを更新してもう一度クリックすると機能します（もう一度クリックするまで）。なんで？

divがクリックされると、AJAXはそれをxmlhttp.send();;のPHPに渡します。「クリック」イベントは。によって処理されdocument.getElementById('b_'+countr).addEventListener("click", selectionMade);ます。

ドキュメントの読み込みに関連していると思います- outerHTML;によって変更されたものを起動したいです。以下に提供される完全なコード：

// prepare clicable map
for (x = 1; x <= 16; x++) {
for (y = 1; y <= 16; y++) {
    (function prepareClickableMap() {
        var cords = x + "x" + y;
        var el = document.getElementById(cords);
        el.addEventListener("click", function (e) { B_modeWindow('1', cords) });
    })();
}
}

//passing selection
for (countr = 1; countr <= 256; countr++) {
    document.getElementById('b_'+countr).addEventListener("click", selectionMade);
}


var s;
function selectionMade(e) {
    selection = e.currentTarget.id.split("_"); 
    s = selection[1];
}

// pass edited map info
function B_modeWindow (id,XxY) {  
    if (s !== undefined) {    
        loading();

        var xmlhttp;
        var position = XxY;

        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        } else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        var xy = position.split("x"); 

        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById(XxY).outerHTML=xmlhttp.responseText;  

                hideloading();
            }
        }

        xmlhttp.open("GET","processMapEdit.php?id="+id+"&x="+xy[0]+"&y="+xy[1]+"&s="+s,true);
        xmlhttp.send();
    }
}
4

1 に答える 1

0

innerHTML変更さouterHTMLれているものはすべて完全に破棄し、新しいHTMLに置き換えます。特に、これはイベントリスナーが破棄されることを意味するため、innerHTML/outerHTMLを使用しないか、後でリスナーを再適用する必要があります。

補足：マップ上のすべてのタイルにイベントリスナーをアタッチする代わりに、マップ自体にイベントリスナーをアタッチし、event.targetクリックされたタイルを見つけるために使用します。

于 2012-09-10T21:40:43.087 に答える