waypoint Uncaught TypeError: Cannot read property 'each' of undefined

Question

我正在使用航路点，它向我发送了这条消息：

未捕获类型错误：无法读取未定义的属性'each'

这就是我使用 vue.js + rails 获得代码的方式：

<template>
      <div id="playerContainer final">
         <iframe src="xxxxxxxxx" allowfullscreen></iframe> 
       </div>
</template>

<script>
  require('waypoints/lib/jquery.waypoints.min.js')
  export default {
    mounted(){
      var ele
      new Waypoint({
        element: ele = document.getElementById('final'),
        handler: function(direction) {
          if (direction == 'down') {
            $(ele).addClass('muestra')
          } else {
            $(ele).removeClass('muestra')
          }
          console.log(direction);
        }
      });
    }
  }
<script>

如果你能帮助我解决这个问题，我将非常感激。

Answer 1

我发现div不能包含多个id。如果您在 getElementById 中指定整个 id，您可以让它工作。

ele = document.getElementById('playerContainer final')

Can a DOM element have an ID that contains a space?

waypoint Uncaught TypeError: Cannot read property 'each' of undefined

waypoint Uncaught TypeError: Cannot read property 'each' of undefined

jquery

ruby-on-rails

jquery-waypoints

vue.js