Question

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

插件

但我有这个错误

未捕获的TypeError：无法读取未定义的属性“fn” 在owl.carousel.min.js：479 在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：无法读取属性＆＃39; fn＆＃39;未定义的 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>

其次，确保在$(document).ready范围内加载Carousel插件，以初始化所有与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 3}}：

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

或使用简单的typeof运算符（ @Nolwennig ）：

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

JS插件中的错误（ASP.NET）

1 个答案: