javascript - masonry : undefined is not a function

Question

我知道undefined is not a function是什么错误意味着，但我不明白为什么它出现在这里。

我刚刚下载了最新的 Masonry 版本并尝试按照文档进行操作。 (http://desandro.github.io/masonry/docs/methods.html)

布局工作正常，但似乎我无法使用任何 masonry()根本没有功能。总是得到 undefined is not a function我的 masonry() 出现错误来电。

既然布局正在工作，我假设 masonry 脚本工作正常，那么为什么我不能使用 masonry(...)没有这个未定义的函数错误？

(我搜索了从 Masonry v2 到 Masonry v3 的更改，但没有找到与此功能相关的任何内容)

部分 HTML 代码:

<a class="navbar-brand" id ="test-masonry" href="#">...</a>

<div id="masonry-container" class="js-masonry" data-masonry-options='{ "columnWidth": 330, "itemSelector": ".item" }'>
    <div class="item">
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#createNewBlock">Create a new block</button> 
    </div>
</div>

<!-- Freshly downloaded from the official Masonry website -->
<script src="js/masonry.pkgd.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/appCtrl.js"></script>

<!--  Copied from the example in the docs -->
<script>
$(function(){
    var $container = $('#masonry-container');
    $('#test-masonry').click(function(){
        var $boxes = $('<div>Test !</div>');
        $container.prepend( $boxes ).masonry( 'reload' );
    });
});
</script>

Answer 1

您在 jQuery 之前加载 Masonry，因此您会得到 undefined。当包含 masonry 时，它会检查 jQuery 是否已加载。如果是，它将把 Masonry 属性设置为 jQuery 对象:$.fn.masonry。因此，当您在 jQuery 之前加载 Masonry 时，不允许使用 jQObject.masonry()。

布局工作正常，因为 Masonry 不需要 jQuery 才能工作