owl carousel 插件在事件点击中不起作用答案

【问题标题】：owl carousel plugin doesn't work inside a event clickowl carousel 插件在事件点击中不起作用
【发布时间】：2014-08-06 21:41:26
【问题描述】：

我需要像下面的代码一样在点击事件中初始化猫头鹰轮播，它在我第一次点击时起作用，但是当我再次点击它时（在事件 div 上）它根本不起作用。我怎样才能做到这一点？有没有办法重置猫头鹰旋转木马？

我在这篇文章的最后部分添加了我的完整代码，以便更好地理解我的 pb 并对其进行测试。

您能帮我解决这个问题吗？我真的很需要这个。

提前致谢，

CAFC

源猫头鹰轮播：http://owlgraphic.com/owlcarousel/demos/customJson.html

$('#XX').click(function(e) {

    e.PreventDefault;

    $("#owl-demo").owlCarousel({
        jsonPath: 'json/customData2.json',
        jsonSuccess: customDataSuccess
    });

    function customDataSuccess(data) {

        var content = "";
        for (var i in data["items"]) {

            var img = data["items"][i].img;
            var alt = data["items"][i].alt;

            content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
        }

        $("#owl-demo").html(content);
    }

});

我的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Owl Carousel - Dynamic content via JSON</title>

    <!-- Owl Carousel Assets -->
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">


    <script src="../assets/js/jquery-1.9.1.min.js"></script>
    <script src="../owl-carousel/owl.carousel.js"></script>


    <!-- Demo -->

    <style>
        #owl-demo .item {
            background: #a1def8;
            padding: 10px 0px;
            display: block;
            margin: 5px;
            color: #FFF;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            text-align: center;
        }
    </style>


    <script>
        $(document).ready(function() {



            $('#XX').click(function(e) {


                $("#owl-demo").owlCarousel({
                    jsonPath: 'json/customData2.json',
                    jsonSuccess: customDataSuccess
                });

                function customDataSuccess(data) {



                    var content = "";
                    for (var i in data["items"]) {

                        var img = data["items"][i].img;
                        var alt = data["items"][i].alt;

                        content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
                    }

                    $("#owl-demo").html(content);
                }



            });




        });
    </script>




</head>

<body>


    <div id="owl-demo"></div>

    <div id='XX'>Click HERE!</div>

</body>

</html>

【问题讨论】：

在您为问题添加标签时，请阅读标签说明。 owl 标签是关于 OWL，Web 本体语言。你应该用owl-carousel 标记它。我已经给你修好了，还加了javascript。

标签： javascript jquery carousel owl-carousel

【解决方案1】：

来吧：

JS：

$(document).ready(function () {
    var owl = false;
    $('#XX').click(function (e) {
        if (owl) {
            $("#owl-demo").data('owlCarousel').reinit({
                jsonPath: '/echo/json',
                jsonSuccess: customDataSuccess
            });
        } else {
            owl = true;
        }
        $("#owl-demo").owlCarousel({
            jsonPath: '/echo/json',
            jsonSuccess: customDataSuccess
        });

        function customDataSuccess(data) {
            console.log('loading Data');

            data = testJSON;

            var content = "";
            for (var i in data["items"]) {

                var img = data["items"][i].img;
                var alt = data["items"][i].alt;

                content += "<img src=\"" + img + "\" alt=\"" + alt + "\">";
            }

            $("#owl-demo").html(content);
        }
    });
});

reinit的方法可以在文档底部5. Owl Data methods下找到

演示：http://jsfiddle.net/robschmuecker/pLvdx8xx/

【讨论】：