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

Question

單擊"#livemap" li元素時，我試圖調用draw()函數。 $("#livemap").click()可以正常工作，而draw()則不能。

當我從"#content" livemap.php使用html啟動應用程序時， draw()可以正常工作。

這使我相信， draw()中的document.getElementbyId("a")尚不知道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

$().load()啟動之后，將立即調用您的draw()函數，這意味着它不會等到加載完成后，因此無法訪問$().load()加載的任何內容。

因此，請嘗試：

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

這將使draw()僅在"livemap.php"的$().load()完成后才能調用。

同樣，您對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 個解決方案

解決方案1
2 已采納 2015-04-20 21:46:30

解決方案2
-1 2015-04-20 21:46:43

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

問題描述

2 個解決方案

解決方案1 2 已采納 2015-04-20 21:46:30

解決方案2 -1 2015-04-20 21:46:43

解決方案1
2 已采納 2015-04-20 21:46:30

解決方案2
-1 2015-04-20 21:46:43