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