![](/img/trans.png)
[英]OnClick() Functions not working when loaded through XML HttpRequest
[英]JavaScript Functions Not Working After AJAX XML HttpRequest
我正在创建一个交互式地图,允许用户从时间轴中选择年份并过滤事件,这是通过XML HttpRequest来完成的,该XML HttpRequest每次都会重新绘制SVG。
每次用户选择年份/过滤器时,都会重写地图的SVG代码,包括用于缩放的JavaScript函数和工具提示。 该代码是Java中的字符串,因为它依赖于if语句。 但是,无论何时用户选择年份/过滤器,JavaScript函数均不起作用。 一个类在单独的if语句中将JavaScript代码重复三遍
这是XML http请求代码:
var year_selected = document.getElementById('year').innerHTML;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("map").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "/BCMapYear.html/"+year_selected, true);
xhttp.send();
JavaScript:
"<script type=\"text/javascript\">" +
"var transformMatrix = [1,0,0,1,0,0];"+
"var svg = document.getElementById('svg-map');"+
"var viewBox = svg.getAttributeNS(null, \"viewBox\").split(\" \");"+
"var centerX = parseFloat(viewBox[2])/2;"+
"var centerY = parseFloat(viewBox[3])/2;"+
"var matrixGroup = svg.getElementById(\"matrix-group\");"+
"var origMatrix = [1,0,0,1,0,0];"+
"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);"+
"}"+
"</script>"
+"<script type=\"text/ecmascript\">\n" +
" (function() {\n" +
" var svg = document.getElementById('svg-map');\n" +
" var tooltip = svg.getElementById('tooltip');\n" +
" var tooltipText0 = document.getElementById('tooltiptext0').firstChild;\n" +
" var tooltipText1 = document.getElementById('tooltiptext1').firstChild;\n" +
" var tooltipText2 = document.getElementById('tooltiptext2').firstChild;\n" +
" var tooltipText3 = document.getElementById('tooltiptext3').firstChild;\n" +
" var triggers = svg.getElementsByClassName('tooltip-trigger');\n" +
" for (var i = 0; i < triggers.length; i++) {\n" +
" triggers[i].addEventListener('mousemove', showTooltip);\n" +
" triggers[i].addEventListener('mouseout', hideTooltip);\n" +
" }\n" +
" function showTooltip(evt) {\n" +
" var CTM = svg.getScreenCTM();\n" +
" var x = (evt.clientX - CTM.e + 6) / CTM.a;\n" +
" var y = (evt.clientY - CTM.f + 20) / CTM.d;\n" +
" tooltip.setAttributeNS(null, \"transform\", \"translate(\" + x + \" \" + y + \")\");\n" +
" tooltip.setAttributeNS(null, \"visibility\", \"visible\");\n" +
" tooltipText0.data = evt.target.getAttributeNS(null, \"data-tooltip-text0\");\n" +
" tooltipText1.data = evt.target.getAttributeNS(null, \"data-tooltip-text1\");\n" +
" tooltipText2.data =
evt.target.getAttributeNS(null, \"data-tooltip-text2\");\n" +
" tooltipText3.data =
evt.target.getAttributeNS(null, \"data-tooltip-text3\");\n" +
" }\n" +
" function hideTooltip(evt) {\n" +
"
tooltip.setAttributeNS(null, \"visibility\", \"hidden\");\n" +
" }\n" +
" })()" +
" </script>";
在控制台上出现未定义的参考错误缩放未定义
你可以加 (); 在您要执行的块之后。
(function(){
//Bunch of code...
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.