title: why my code does work on chrome and not once compile using cordova
body: <p>i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...</p>
  
  <p>i developed a sample of test to show you ..</p>
  
  <p>when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...</p>
  
  <p>in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.</p>
  
  <p>on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..</p>
  
  <p>when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..</p>
  
  <p>here is my sample of code :</p>
  
  <p>html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;link href="styles/kendo.common.min.css" rel="stylesheet" /&gt;
  &lt;link href="styles/kendo.default.min.css" rel="stylesheet" /&gt;
  &lt;link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /&gt;
  &lt;link href="styles/index.css" rel="stylesheet" /&gt;
  &lt;!-- Librairies --&gt;
  &lt;script src="lib/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;!-- Fonction d'init --&gt;
  &lt;script src="init/cordovaInit.js"&gt;&lt;/script&gt;
  &lt;!-- Controleurs --&gt;
  &lt;script src="controlers/panelControler.js"&gt;&lt;/script&gt;
  &lt;!-- EndScript --&gt;
  &lt;/head&gt;
  &lt;body onload="onBodyLoad()"&gt;
  &lt;div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search"&gt;
  &lt;div id="search"&gt;
       &lt;div id="first"&gt;
        &lt;p&gt;first&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="second"&gt;
        &lt;p&gt;second&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="third"&gt;
        &lt;p&gt;third&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']"&gt;
  &lt;ul data-role="listview" data-type="group"&gt;
  &lt;li&gt;Menu
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#drawer-home" onClick="panelControler('first')"&gt;First&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#drawer-home" onClick="panelControler('second')"&gt;Second&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#drawer-home" onClick="panelControler('third')"&gt;Third&lt;/a&gt;&lt;/li&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div data-role="layout" data-id="drawer-layout" data-layout="overview-layout"&gt;
  &lt;header data-role="header"&gt;
    &lt;div data-role="navbar"&gt;
      &lt;a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"&gt;&lt;/a&gt;
      &lt;span&gt;Test&lt;/span&gt;
    &lt;/div&gt;
   &lt;/header&gt;
  &lt;/div&gt;
  &lt;script&gt;
  var app = new kendo.mobile.Application(document.body);
  panelControler('first');
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is the very simple javascript i'm using to test :</p>
  
  <pre><code>function panelControler(action){
  alert("panelControler");
  if (action === 'first'){
      alert("first show");
      $("#first").show();
      $("#second").hide();
      $("#third").hide();
  }
  else if (action === 'second'){
      alert("second show");
      $("#second").show();
      $("#first").hide();
      $("#third").hide();
  }
  else if (action === 'third'){
      alert("third show");
      $("#third").show();
      $("#second").hide();
      $("#first").hide();
  }
  }
  </code></pre>