Question

我在点击draw() "#livemap"元素时尝试调用li函数。 $("#livemap").click()工作正常但draw()没有。

当我使用draw()内的livemap.php的html启动应用时，

"#content"可以正常工作。

这让我相信document.getElementbyId("a")中的draw()还不知道HTML中存在"a" ......那我该怎么办呢？

的index.html：

<head>
    <script>
        draw(){
            var a = document.getElementById("a");
            var b = a.getContext("2d");
            var mydiv = document.getElementById("canvascont");

            ...
        }
    </script>
    <script>
        $(document).ready(function(){
            $("#livemap").click(function(){
                $("#content").load("livemap.php");
                draw();
            });

        ...

    </script>
</head>
<body>
    <!-- Title image and nav bar here-->
    ...
    <li><a id="livemap"><img  src ="images/icons/1429420112_icon-map-128.png"/>Map</a>
    ...

    <!-- My main content-->
    <div id="container">
        <div id="content">
        </div>
    </div>
</body>

livemap.php：

<div id="canvascont">
    <canvas id="a" width="300" height="300"></canvas>
    <script>
        var a = document.getElementById("a");
        var b = a.getContext("2d");
        b.fillStyle = "#FF0000";
        b.fillRect(2, 2, 10, 10); 
    </script>
</div>

如何解决这个问题的方向非常感谢！

Answer 1

在draw()启动后立即调用$().load()函数，这意味着它不会等到加载完成，因此无法访问$().load()加载的任何内容。

所以，试试：

$("#content").load("livemap.php", function () {
    draw();
});

只有在draw() $().load()完成后才会调用"livemap.php"。

您的draw()声明也是错误的。使用function draw() { ... }而非draw() { ... }。这是结束片段：

<head>
    <script>
        function draw() {                                          // this line changed
            var a = document.getElementById("a");
            var b = a.getContext("2d");
            var mydiv = document.getElementById("canvascont");

            ...
        }
    </script>
    <script>
        $(document).ready(function(){
            $("#livemap").click(function() {
                $("#content").load("livemap.php", function () {    // this line changed
                    draw();                                        // this line changed
                });                                                // this line changed
            });

        ...

    </script>
</head>

Answer 2

var draw = function() {}

为什么不组合你的脚本呢？

$(document).ready(function(){

    var draw = function() {
        var a = document.getElementById("a");
        var b = a.getContext("2d");
        var mydiv = document.getElementById("canvascont");

        ...
    }

    $("#livemap").click(function(){
        $("#content").load("livemap.php");
        draw();
    });
....

如何在jQuery.load（）之后使用JavaScript函数？

2 个答案: