0

当我单击元素时，它会启动，但是当再次单击该元素时，它什么也不做。刷新页面并再次单击有效（直到再次单击它）。为什么？

单击 div 时，AJAX 将其传递给 PHP 中的xmlhttp.send();; “点击”事件由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 回答