Foundation 6 change.zf.slider事件未触发

Question

这是我第一次发布，所以这里...

为了我的一生，我无法得到

$("[data-slider]").on('change.zf.slider', function(){});

发生火灾。我也尝试过使用元素的id

$("#slider").on('change.zf.slider', function(){});

但仍然没有。

我已经通过谷歌搜索和堆栈溢出，想到了这个特定问题的所有可能组合和变化，但没有帮助。

我已经阅读了该类的Foundation 6文档，在那找到了事件名称。但是测试它没有用。

这是JS：

<script type="text/javascript">
   $(document).ready(function() {
     $(document).foundation();
   });
   $("[data-slider]").on('change.zf.slider', function() {
     console.log("slider!");
   });
</script>

这是元素本身的HTML：

<div id="slider" class="slider" data-slider data-initial-start="10">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="val"></span>
  <span class="slider-fill" data-slider-fill></span>
</div>

这些是包含项（它们在发布时已包含：

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.offcanvas.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.slider.js"></script>

发布后，我记得文档中提到需要添加foundation.core.js，foundation.util.motion.js，foundation.util.keybaord.js，foundation.util.triggers.js和foundation.util.touch。 js，然后开始抛出错误

Uncaught TypeError: Cannot read property '_init' of undefined

因此，我进行了搜索，发现了一个建议，该建议添加Foundation.util.mediaQuery.js，它可能与core.js具有共同的依赖性，因此包含的内容如下。

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.offcanvas.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.motion.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.triggers.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.keyboard.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.touch.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.slider.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.core.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.mediaQuery.js"></script>

但是这破坏了基础功能，现在，canvas菜单也不会打开，也没有任何错误...

Answer 1

我知道这是旧帖子，但是您需要使用changed.zf.slider而不是change.zf.slider（请注意'd'）。所以这应该为您工作：

$("#containerID").on('change changed.zf.slider', function(){});

https://foundation.zurb.com/sites/docs/slider.html