Menu icon Foundation
el.data(...).split is not a function

Hello all, I am trying to create a simple responsive navigation using MeteorJS+React and Foundation. Everything has been working smoothly until I have reached the point where I added a toggle bar. It does not seem to trigger anything and keeps giving me this error.

Uncaught TypeError: el.data(...).split is not a function
    at triggers (foundation.js:1613)
    at HTMLButtonElement.<anonymous> (foundation.js:1637)
    at HTMLDocument.dispatch (jquery.js?hash=c57b3cf…:4723)
    at HTMLDocument.elemData.handle (jquery.js?hash=c57b3cf…:4391)

Here is my code, written in JSX.

 

import React from 'react';

MainHeader = React.createClass({

  render() {

    return(
      <div className="header">

        <div id="nav-toggle" className="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
          <button className="menu-icon" type="button" data-toggle></button>
          <div className="title-bar-title">Menu</div>
        </div>

        <div className="top-bar" id="main-nav" role="navigation" data-animate="hinge-in-from-top spin-out">

          <div className="top-bar-left">
            <span className="menu-text">Shine</span>
          </div>

          <div className="top-bar-right">
            <ul className="menu">
              <li><a href="/">Home</a></li>
              <li>
                <input type="search" placeholder="Search" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});

 

Responsivemenujavascriptmeteornodejsreact

Hello all, I am trying to create a simple responsive navigation using MeteorJS+React and Foundation. Everything has been working smoothly until I have reached the point where I added a toggle bar. It does not seem to trigger anything and keeps giving me this error.

Uncaught TypeError: el.data(...).split is not a function
    at triggers (foundation.js:1613)
    at HTMLButtonElement.<anonymous> (foundation.js:1637)
    at HTMLDocument.dispatch (jquery.js?hash=c57b3cf…:4723)
    at HTMLDocument.elemData.handle (jquery.js?hash=c57b3cf…:4391)

Here is my code, written in JSX.

 

import React from 'react';

MainHeader = React.createClass({

  render() {

    return(
      <div className="header">

        <div id="nav-toggle" className="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
          <button className="menu-icon" type="button" data-toggle></button>
          <div className="title-bar-title">Menu</div>
        </div>

        <div className="top-bar" id="main-nav" role="navigation" data-animate="hinge-in-from-top spin-out">

          <div className="top-bar-left">
            <span className="menu-text">Shine</span>
          </div>

          <div className="top-bar-right">
            <ul className="menu">
              <li><a href="/">Home</a></li>
              <li>
                <input type="search" placeholder="Search" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});

 

Lobster 3 months ago

Have the same problem. Any suggestions how to solve it?

Vladimir Buskin 3 months ago

was hitting the same issue just half an hour ago (lost it), here is the solution :)

http://stackoverflow.com/questions/43552945/foundation-react-throw-el-data-split-is-not-a-function-when-click-on-tog/43552977#43552977