title: i18next not working - i18n not defined
body: <p>Thanks for reading. I've just got myself extremely confused while trying to add i18next into my first phonegap application. I'm very sure that I'm doing something dumb as I'm a new developer. I'd really like this to be able to work in browser (at least during development) and on device.</p>
  
  <p>At the moment I'm getting the error i18n not defined on the init line</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;    
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Auth Demo 2&lt;/title&gt;
      &lt;link rel="stylesheet" href="/css/jquery.mobile.min.css" /&gt;
      &lt;script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/lib/zepto.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/lib/i18next.amd.withJQuery.min.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="js/lib/i18next.min.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt; 
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script&gt;
          $(document).ready(function(){
          if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
          document.addEventListener("deviceready", onDeviceReady, false);
          } else {
              onDeviceReady();
          }
          language_complete = navigator.language.split("-");
          language = (language_complete[0]);
          i18n.init({ lng: language }, function() {
              // save to use translation function as resources are fetched
              $("#content-div").i18n();
          });
      }); 
      function onDeviceReady() {
          startupBehavior(); 
      }   
      &lt;/script&gt;
      &lt;div id="appPage" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Auth Demo&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="content-div" data-role="content"&gt;
              &lt;h2&gt;Auth demo&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;
              &lt;h4&gt;Auth demo&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js (partial)</p>
  
  <pre><code>function startupBehavior() {
      $("#content-div").children().remove(); //clear the form out
      $("#content-div").append('&lt;form id="auth_login_form"&gt;');
      $("#content-div").append('&lt;label for="Email" data-i18n="site.email"&gt;&lt;/label&gt;');
      $("#content-div").append('&lt;input type="text" id="auth_login_email" value="" data-i18n="site.email" placeholder="Email Address old" /&gt;');
      $("#content-div").append('&lt;input type="button" id="auth_login_submit" onClick="handleLogin()"&gt;Log me in&lt;/input&gt;');
  $("#content-div").append('&lt;/form&gt;');
  }
  </code></pre>
  
  <p>My only ideas are that i18next doesn't work with zepto or that I might need to use require.js which I've seen mentioned a few times, but wasn't sure if that was only necessary for node.js based stuff, which this is not.</p>