通过 XML HttpRequest 加载时 OnClick() 函数不起作用

Question

我创建了一个重新加载 div 内容的 XML HttpRequest，方法是在其位置重绘 SVG 地图。在 SVG 地图中是缩放、平移和重置 JavaScript 函数的事件触发器。 map 和 javascript 函数都用 Java 写成字符串

加载的 JavaScript 还包含在悬停时工作的工具提示函数，因此错误显然与 onclick() 相关

XML HttpRequest：

var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                               //select div with id map, replace this with ADMapYear.html and map as drawn in Eclipse/Java
                               document.getElementById("map").innerHTML = xhttp.responseText;
                               eval(document.getElementById("scriptLoad").innerHTML);
                            }
                        };
                        xhttp.open("GET", "/ADMapYear.html/"+year_selected, true);
                        xhttp.send();


JavaScript:

"function reset() {\n" + 
                        "               for(var i = 0; i < 6; i++) {\n" + 
                        "                   transformMatrix[i] = origMatrix[i];\n" + 
                        "               }               \n" + 
                        "               var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";\n" + 
                        "               matrixGroup.setAttributeNS(null, \"transform\", newMatrix); \n" + 
                        "          \n" + 
                        "           };"+

                        "function pan(dx, dy) {"+
                            "transformMatrix[4] += dx;"+
                            "transformMatrix[5] += dy;"+

                            "var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
                            "matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+
                        "}"+

                        "function zoom(scale) {"+
                            "for(var i = 0; i < 4; i++) {"+
                                "transformMatrix[i] *= scale;"+
                            "}"+

                            "transformMatrix[4] += (1-scale) * centerX;"+
                            "transformMatrix[5] += (1-scale)* centerY;"+

                            "var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
                            "matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+ 
                        "}"

SVG：

<path class=\"button\" onclick=\"pan(0,25)\" d=\"M25 5 l6 10 a20 35 0 0 0 -12 0z\" style= \"fill: black;\"/>\n" + 
                                "       <path class=\"button\" onclick=\"pan(25,0)\" d=\"M5 25 l10 -6 a35 20 0 0 0 0 12z\" style= \"fill: black;\" />\n" + 
                                "       <path class=\"button\" onclick=\"pan(0, -25)\" d=\"M25 45 l6 -10 a20, 35 0 0, 1 -12,0z\" style= \"fill: black;\"/>\n" + 
                                "       <path class=\"button\" onclick=\"pan(-25,0)\" d=\"M45 25 l-10 -6 a35 20 0 0 1 0 12z\" style= \"fill: black;\"/>\n" + 
                                "       \n" + 
                                "       <circle class=\"button\" cx=\"25\" cy=\"20.5\" r=\"3\" onclick=\"zoom(1.25)\" style= \"fill: black;\"/>\n" + 
                                "       <circle class=\"button\" cx=\"25\" cy=\"29.5\" r=\"3\" onclick=\"zoom(0.8)\" style= \"fill: black;\"/>\n" + 
                                "       \n" + 
                                "       <g>\n" + 
                                "           <rect class=\"button\" x=\"12\" y=\"50\" width =\"30\" height=\"15\" onclick=\"reset()\" fill=\"#464647\"/>\n" + 

没有错误消息出现，只是在点击时不会缩放、平移或重置

Answer 1

我认为不存在，因为该函数在绑定时不存在。我建议你在 XML HttpRequest 返回后绑定函数

编辑： 此外，您将响应放入一个元素中，然后评估另一个元素：

document.getElementById("map").innerHTML = xhttp.responseText;
eval(document.getElementById("scriptLoad").innerHTML);

应该变成：

document.getElementById("map").innerHTML = xhttp.responseText;
eval(document.getElementById("map").innerHTML);

另外，我建议您不要使用 eval，因为这会在您的代码中造成漏洞。为了避免 eval，您可以在 HttpResponse 中发送一个脚本文件并将其添加到您的代码中。

Answer 2

从 OnClick 调用 HTTPRequst 时，我也遇到了问题。我通过将被点击的元素（一个按钮）放在标签内来解决它。