Question

当我点击元素时它会激活，但是当再次点击它时，它什么都不做。刷新页面并再次单击工作（直到再次单击它）。为什么呢？

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

Answer 1

innerHTML和outerHTML完全破坏正在更改的内容，并将其替换为新的HTML。特别是这意味着任何事件侦听器都被销毁，因此您必须不使用innerHTML / outerHTML，或者之后重新应用侦听器。

侧注：不是将事件侦听器附加到地图上的每个图块，而是将其附加到地图本身，并使用event.target查找单击的图块。

为什么DIV由`outerHTML'改变仍然没有反应

1 个答案: