在执行单击操作之前，jquery 脚本不起作用答案

【问题标题】：jquery script not working untill click action is performed在执行单击操作之前，jquery 脚本不起作用
【发布时间】：2018-05-17 06:41:49
【问题描述】：

在我点击 div 之前，jquery carousel 无法正常工作。

我在我的 html 页面中添加了两个猫头鹰轮播。当我有单个轮播时它工作正常，但是当另一个轮播添加了不同的 ID 时，它无法正常工作，直到我在有轮播的 div 内执行点击。
我在我的 html 页面中添加了两个猫头鹰轮播。当我有单个轮播时它工作正常，但是当另一个轮播添加了不同的 ID 时，它无法正常工作，直到我在具有轮播的 div 内执行单击。

  <script>
    $(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            960: {
                items: 5
            },
            1200: {
                items: 6
            }
            }
        });
        owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
            owl.trigger('next.owl');
            } else {
            owl.trigger('prev.owl');
            }
            e.preventDefault();
        });

        var owl = $('.owl-carousel');
        owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            960: {
                items: 5
            },
            1200: {
                items: 6
            }
            }
        });
        owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
            owl.trigger('next.owl');
            } else {
            owl.trigger('prev.owl');
            }
            e.preventDefault();
        });

        $('.owl-carousel-res').owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: false
            },
            1000: {
                items: 6,
                nav: true,
                loop: true,
                margin: 20
            }
            }
        })
    })

【问题讨论】：

你能在 sn-p 中复制它吗？？
为什么要在同一个变量上初始化它们？

标签： jquery jquery-plugins owl-carousel

【解决方案1】：

尝试使用不同的 id，那么两者都可以正常工作。

【讨论】：

【解决方案2】：

试试这个代码： 1：将 "owl-1" 和 "owl-2" 类添加到您的 div 与类 "owl-carousel" 所以它变成<div class="owl-carousel owl-1">

    $(document).ready(function() {
          var owl = $('.owl-1');
          owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
              0: {
                items: 1
              },
              600: {
                items: 3
              },
              960: {
                items: 5
              },
              1200: {
                items: 6
              }
            }
          });
          owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
              owl.trigger('next.owl');
            } else {
              owl.trigger('prev.owl');
            }
            e.preventDefault();
          });


          var owl2 = $('.owl-2');
          owl2.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            responsive: {
              0: {
                items: 1
              },
              600: {
                items: 3
              },
              960: {
                items: 5
              },
              1200: {
                items: 6
              }
            }
          });
          owl2.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY > 0) {
              owl2.trigger('next.owl');
            } else {
              owl2.trigger('prev.owl');
            }
            e.preventDefault();
          });

        });

【讨论】：