javascript - JS 插件错误 (ASP.NET)

Question

我尝试使用https://owlcarousel2.github.io/OwlCarousel2/

插件

但我有这个错误

Uncaught TypeError: Cannot read property 'fn' of undefined at owl.carousel.min.js:479 at owl.carousel.min.js:494

在此代码中

a.fn.owlCarousel = function (b) {
        var c = Array.prototype.slice.call(arguments, 1);
        return this.each(function () {
            var d = a(this),
                f = d.data("owl.carousel");
            f || (f = new e(this, "object" == typeof b && b), d.data("owl.carousel", f), a.each(["next", "prev", "to", "destroy", "refresh", "replace", "add", "remove"], function (b, c) {
                f.register({
                    type: e.Type.Event,
                    name: c
                }), f.$element.on(c + ".owl.carousel.core", a.proxy(function (a) {
                    a.namespace && a.relatedTarget !== this && (this.suppress([c]), f[c].apply(this, [].slice.call(arguments, 1)), this.release([c]))
                }, f))
            })), "string" == typeof b && "_" !== b.charAt(0) && f[b].apply(f, c)
        })
    }

这是我在代码中使用插件的方式

 <script>
    $('#display').click(function () {
        var vacancyId = $("#vacancy").val();
        var model = {
            vacancyId: vacancyId
    };

        $.ajax({
    url: '@Url.Action("Links", "Questions")',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(model),
    type: 'POST',
    dataType: 'json',
    processData: false,
    success: function (data) {
        var question2 = data;
        for (var i = 0; i <= question2.length - 1; i++) {
            var videoHTML = '<video width="320" height="240" style="margin-left: 130px;margin-top: 20px;" controls>';
            videoHTML += '<source src="' + document.location.origin + "/uploads/" + question2[i].Linkes + ".webm" + '" type="video/webm">';
            videoHTML += '</video>';
            $(".videolist").append(videoHTML);
            $(".videolist").owlCarousel();
        }
    }
    });
});
</script>

我该如何解决这个问题？

Answer 1

此错误意味着脚本加载顺序错误或无序:

TypeError: Cannot read property 'fn' of undefined at owl.carousel.min.js:479 at owl.carousel.min.js:494

由于 Owl.Carousel 插件需要 jQuery 才能运行，因此将 jQuery 放置在所有脚本顺序的最上面，然后放置 owl.carousel.min.js 然后就像这个例子(阅读Owl Carousel plugin docs以获取更多信息):

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/owl-carousel/owl.carousel.min.js"></script>

其次，确保 Carousel 插件加载到 $(document).ready 范围内，以初始化所有 DOM 相关对象:

<script>
    $(document).ready(function () {
        $('#display').click(function () {
            // other stuff
        });

        $.ajax({
                // other stuff

                success: function (data) {
                    var question2 = data;
                    for (var i = 0; i <= question2.length - 1; i++) {

                        // other stuff

                        $(".videolist").owlCarousel();
                    }
                }
        });
    });
</script>

最后要记住的重要一点是:并非所有脚本都可以同时加载(这可能会在受延迟影响的某个点破坏脚本顺序)，因此您需要检查 owlCarousel 是否存在在使用 isFunction 调用之前:

if ($.isFunction('owlCarousel')) {
    $(".videolist").owlCarousel();
}

或使用简单的typeof运算符(归功于@Nolwennig):

if(typeof owlCarousel === 'function') { 
    $(".videolist").owlCarousel();
}

相关问题:

jQuery Uncaught TypeError: Cannot read property 'fn' of undefined (anonymous function)

TypeError: $(...).owlCarousel is not a function