0

函数prepareMapEventListener()添加 256 个 EventListener ( el.addEventListener("click", function (e) { B_modeWindow('1', cords) });)

在我用 outerHTML 挂起代码后，document.getElementById(XxY).outerHTML=xmlhttp.responseText;我必须重新为该元素添加 EventListener，我试图用以下方法完成：

// refresh clicable map after it's edited
function refreshMapEventListener() {
    var el = document.getElementById(position);
    el.addEventListener("click", function (e) { B_modeWindow('1', position) });
}

但它完成了一半的工作：它更新了侦听器，但只更新了最后一个单击的元素-如果我单击 10 个元素而不是想要更改其中的第 5 个-第 10 个元素将被更改。

refreshMapEventListener();所以我尝试通过删除和替换为每个元素重新播放侦听器prepareMapEventListener()：

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

它有效！但是每次尝试都会使输出加倍 - 所以点击 2 次后我有 3 次 AJAX 调用，点击 3 次后我有 6 次，而不是 12 次。

如何解决？

现场示例（确保观看控制台/萤火虫）：

http://xn--wiadomesny-37b.pl/stackoverflow/

完整代码如下：

// prepare clicable map
function prepareMapEventListener() {
    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) });
        })();
    }
    }
}

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

// send edited map info to DB
var position;
function B_modeWindow (id,XxY) {  
    if (s !== undefined) {    
        loading();
    
        var xmlhttp;
        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;  
                prepareMapEventListener();
                hideloading();
            }
        }
    
        xmlhttp.open("GET","processMapEdit.php?id="+id+"&x="+xy[0]+"&y="+xy[1]+"&s="+s,true);
        xmlhttp.send();
    }
}
4

1 回答 1

0

从您的评论（和您的实际示例）中，我们了解到您想要的只是一个新class的 HTML 元素。这样就容易多了……

改变你的

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

到

xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById(XxY).className=xmlhttp.responseText;
                hideloading(); //I don't know what this is, so I leave it here
            }
        }

并修改您processMapEdit.php以仅返回所需的类名而不是整个DIV元素。

此外，可能有一些浏览器在XMLHttpRequest获取纯文本而不是有效的 XML 文本时无法正常工作，因此您可能需要添加

xmlhttp.overrideMimeType("text/plain")

之前send()。

于 2012-09-11T09:33:52.120 回答