javascript 回调函数(如 afterMove)不被调用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29295079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:20:31  来源:igfitidea点击:

Callback Functions(like afterMove) are not called

javascriptjqueryowl-carousel

提问by Fighter Jet

The following is a code taken form Owl Carousel'sown site. I don't know why the callback functions(here afterMove) are not called! Could anybody get the afterMovefunction called? For me it's not just afterMove, but none of the callbacks works!

以下代码来自Owl Carousel自己的网站。我不知道为什么没有调用回调函数(这里是afterMove)!有人可以调用afterMove函数吗?对我来说,不仅仅是afterMove,而且没有一个回调有效!

<html>
<head>
  <!-- Owl Carousel -->
  <link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.carousel.min.css">

  <!-- Owl Default Theme -->
  <link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.theme.default.min.css">

  <style type="text/css">
    #owl-demo .item {
        background: #3fbf79;
        padding: 30px 0px;
        margin: 10px;
        color: #FFF;
        border-radius: 3px;
        text-align: center;
    }
  </style>
</head>
<body>
  <div id="owl-demo" class="owl-carousel">
    <div class="item"><h1>0</h1></div>
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
  </div>

<!-- jQuery -->
<script src="js/jquery/1.9.1/jquery.min.js"></script>
<!-- Owl Carousel -->
<script src="js/vendors/owl-carousel-2/owl.carousel.js"></script>

<script type="text/javascript">
  $(document).ready(function() {

  var owl = $("#owl-demo");
  owl.owlCarousel({
    navigation : true,
    afterMove : afterMove
  });

  function afterMove(){
    alert("Hey!");
  }
});
</script>
</body>
</html>

回答by Sudhir Bastakoti

you need to use new events with .on(), as per mentioned in its docs, as:

您需要将新事件与 一起使用.on(),如其文档中所述,如:

var owl = $("#owl-demo");
owl.owlCarousel({
    navigation : true
});
//register `change` event
owl.on('changed.owl.carousel', function(e) {
    alert("changed");
});

Demo :: jsFiddle

演示 :: jsFiddle