Question

我已经创建了一个XML HttpRequest，它通过在其位置重画SVG映射来重载div内容。 SVG映射内是缩放，平移和重置javascript功能的事件触发器。地图和javascript函数都用Java编写为字符串

所加载的JavaScript还包含可在悬停时使用的工具提示功能，因此错误显然是onclick（）

XML HttpRequest：

<div class="wrapper">
    <div id="bd1" class="border">
        <input id="inp1" class="imginp" type="file" hidden>
        <img src="https://img.icons8.com/wired/64/000000/add-image.png">
    </div>
    <div id="bd2" class="border">
        <input id="inp2" class="imginp" type="file" hidden>
        <img src="https://img.icons8.com/wired/64/000000/add-image.png">
    </div>
</div>

for (a = 1; a < 3; a++) {
    $("#bd"+a).click(function() {
        $(this).children(".imginp").click();
    });
    $('#inp'+a).on('change', function(e){
      var files = e.target.files;
      $.each(files, function(i, file){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            template = 
            '<div class="border">'+
                '<input id="inp'+a+'" class="imginp" type="file" hidden>'+
            '<img class="blah" src="'+e.target.result+'">'+
            '</div>';
            // $('.border').eq(0).replaceWith(template);
            $('#bd'+a).replaceWith(template);
        };
      });
    });
}

SVG：

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);"+ 
                        "}"

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

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，因为这会在您的代码中创建漏洞。为了避免评估，您可以发送HttpResponse脚本文件并将其添加到代码中。

通过XML HttpRequest加载时，OnClick（）函数不起作用

1 个答案: