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

Question

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

我这辈子都得不到

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

要触发的事件。我也尝试过使用元素的 id

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

但仍然没有。

我已经通过 google 和 stack overflow 搜索了想到的这个特定问题的所有可能组合和变体，但没有帮助。

我已经浏览了关于此类的 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