title: Static HTML - localization using jquery.i18n.js not working
body: <p>I've tried to make a simple HTML test where the content will be translated into specific languages using jquery.i18n.js library. It partially works meaning the default (English) text is being loaded, but the lang switch is not.</p>
  <p>my jsfiddle is here:
  <a href="https://jsfiddle.net/g8uwotsx/12/" rel="nofollow noreferrer">https://jsfiddle.net/g8uwotsx/12/</a></p>
  <p><strong>HTML code:</strong></p>
  <pre><code>&lt;header&gt;
    &lt;nav&gt;
                  &lt;ul class=&quot;switch-locale&quot;&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;en&quot;&gt;EN&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;pl&quot;&gt;PL&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;fr&quot;&gt;FR&lt;/a&gt;&lt;/li&gt;             
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;de&quot;&gt;DE&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;it&quot;&gt;IT&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;es&quot;&gt;ES&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; data-locale=&quot;ru&quot;&gt;RU&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col text-center&quot;&gt;
        &lt;h1 data-i18n=&quot;app-title&quot;&gt;placeholder&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JS code:</strong></p>
  <pre><code>jQuery(function() {
  $.i18n().load( {
          'en': {
            'app-title': 'english headline'
          },
          'it': {
            'app-title': 'italian headline'
          },
          'es': {
            'app-title': 'spanish headline'
          }
        }).done(function() {
            $('.switch-locale').on('click', 'a', function(e) {
              e.preventDefault();
              $.i18n().locale = $(this).data('locale');
            });
          });
    
        
  $('body').i18n(); 
  });
  
  
      
      
  </code></pre>
  <p><strong>CSS code:</strong></p>
  <pre><code>.switch-locale li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
  }
  
  .switch-locale {
    text-align:center;
    border-bottom:1px solid grey;
  }
  </code></pre>
  <p>the inspiration was official documentation and this link:
  <a href="https://phrase.com/blog/posts/jquery-i18n-the-advanced-guide/" rel="nofollow noreferrer">https://phrase.com/blog/posts/jquery-i18n-the-advanced-guide/</a></p>
  <p>expected behaviour would be:</p>
  <ul>
  <li>by default user sees only English texts</li>
  <li>after changing the language via menu the text will be replaced with a local one</li>
  </ul>
  <p>in this example I'm using a solution without separate json files per lang (in the final one I would like to make it that way)</p>
  <p>Issues:</p>
  <ul>
  <li>text is being displayed only in English</li>
  <li>text is not translating despite the clicking on different language</li>
  </ul>