Question

我有以下页面：

<body>
  <div id="menuBar"> </div>
  <canvas id="myCanvas" width="700" height="700" style="border:1px solid #000000;"></canvas>
</body>

<script src="../Scripts/jQuery.mazeBoard.js"></script>
<script>
  $(document).ready(function () {
     var mazeArray = ...
     $("#menuBar").load("/Views/UpperMenu.html");
     $("#myCanvas").mazeBoard(mazeArray);
  })
</script>

mazeBoard是mazeBoard.js中定义的jQuery插件：

(function ($) {

    $.fn.mazeBoard = function (mazeData) {

        this.element = $(this)[0];
        var context = this.element.getContext("2d");

        draw on canvas...

        return this;
    }
})(jQuery);

奇怪的是，除非我删除行$("#menuBar").load("/Views/UpperMenu.html")，否则我会得到一个＆＃34; mazeboard不是一个函数＆＃34;错误。删除行时，此错误消失。

Answer 1

很难说为什么会出现此错误，但可能与.load()异步有关。

最简单的尝试是交换两行的顺序：

$(document).ready(function () {
    var mazeArray = ...
    $("#myCanvas").mazeBoard(mazeArray);
    $("#menuBar").load("/Views/UpperMenu.html");
});

如果这不起作用，那么您可以在初始化.load()之前等待.mazeBoard()完成：

$(document).ready(function () {
    var mazeArray = ...;
    $("#menuBar").load("/Views/UpperMenu.html", function() {
        $("#myCanvas").mazeBoard(mazeArray);
    });
});

jQuery load（）导致jQuery插件错误

1 个答案: