Foundation 5 JS插件不起作用

Question

I've been using Foundation for a couple of years, but haven't had an issue with the JS plugins until I just upgraded to Foundation 5. I've run bower 'bundle' and updated the file paths, but no matter what, plugins like Reveal and Joyride simply never fire unless manually called via the console. 我已经使用Foundation几年了，但是直到我升级到Foundation 5为止，JS插件都没有出现问题。我已经运行bower'bundle'并更新了文件路径，但是无论如何，除非通过控制台手动调用，否则Reveal和Joyride之类的插件根本不会触发。 The dev tools aren't throwing any errors or showing any missing files, so I'm not sure what's going on. 开发工具不会引发任何错误或显示任何丢失的文件，因此我不确定发生了什么。

Here's my super basic markup: 这是我的超级基本标记：

<html class='no-js' lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <link href='stylesheets/app.css' rel='stylesheet'>
    <script src='bower_components/modernizr/modernizr.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  </head>
  <body>
    <div class='row'>
      <div class='small-12 columns'>
        <a data_reveal_id='myModal' href='#'>
          <button>Hello!</button>
        </a>
      </div>
    </div>
    <div class='reveal-modal' data_reveal id='myModal'>
      <h1>I'm a modal!</h1>
      <a class='close-reveal-modal'>&#215;</a>
    </div>
    <script src='bower_components/foundation/js/foundation.min.js'></script>
    <script src='bower_components/fastclick/lib/fastclick.js'></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Any help would HUGELY appreciated! 任何帮助将不胜感激！ I've tried checking every other thread I can find but I haven't seen a similar issue. 我尝试检查我可以找到的所有其他线程，但没有看到类似的问题。

Answer 1

You got 2 errors in your code. 您的代码中有2个错误。

Dont use underscores, use hyphens for the data attribute to work correctly 不要使用下划线，请对数据属性使用连字符以使其正常工作
Dont put your button inside an anchor tag, the button is sufficent. 不要将您的按钮放在锚标记内，按钮就足够了。

Like so: 像这样：

<html class='no-js' lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <link href='stylesheets/app.css' rel='stylesheet'>
    <script src='bower_components/modernizr/modernizr.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  </head>
  <body>
    <div class='row'>
      <div class='small-12 columns'>
        <!--<a data_reveal_id='myModal' href='#'>-->
          <button data-reveal-id='myModal'>Hello!</button>
        <!--</a>-->
      </div>
    </div>
    <div class='reveal-modal' data-reveal id='myModal'>
      <h1>I'm a modal!</h1>
      <a class='close-reveal-modal'>&#215;</a>
    </div>
    <script src='bower_components/foundation/js/foundation.min.js'></script>
    <script src='bower_components/fastclick/lib/fastclick.js'></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Foundation 5 JS插件不起作用

问题描述

1 个解决方案

解决方案1
0 2014-12-03 20:11:49

Foundation 5 JS插件不起作用

问题描述

1 个解决方案

解决方案1 0 2014-12-03 20:11:49

解决方案1
0 2014-12-03 20:11:49