如何附加事件监听器？

Question

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

在document.getElementById(XxY).outerHTML=xmlhttp.responseText;中使用outerHTML处理代码后，我必须重做为该元素添加EventListener，我试图用它来实现：

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

但是它完成了一半的工作：它更新了Listeners，但仅限于最后一个元素被点击 - 如果我点击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个。

如何解决？

实例（确保观看控制台/ firebug）：

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();
    }
}

Answer 1

根据您的评论（以及您的实际示例），我们了解到您想要的只是HTML元素的新class。这更容易......

更改您的

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()之前

。