title: OnClick works only works after reload, using jquerymobile
body: <p>I know it's an often asked question, but no answer (till now) fits for me.</p>
  
  <p>I wrote a mobile app with <strong>Cordova.</strong> I'm also testing apps in browser (Firefox). I'm using jQuery and jq mobile.</p>
  
  <p>The problem is: my <code>OnClick</code> events on work only after refresh, which isn't possible on mobile and even on pc not really an solution.</p>
  
  <p>Update: I read about, that the ehader isn't loaded again in jQuery mobile. So I treid it as described in thsi solution: <a href="https://stackoverflow.com/questions/15430912/page-loaded-differently-with-jquery-mobile-transition/15431229#15431229">page loaded differently with jQuery-mobile transition</a></p>
  
  <p>didn't work.</p>
  
  <p>And with <code>alert();</code> you see, that the script runs once but before the site is totally build. </p>
  
  <p>My html:</p>
  
  <pre><code>&lt;div data-role="main" class="ui-content" id="container" &gt;
              &lt;div id="container0"&gt;
                  &lt;a data-role="button"  id="anchor0" &gt;Neuen Termin Hinzufügen&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>originally the <code>&lt;a&gt;</code> had an <code>onclick</code> (<code>&lt;a onClick&gt;="doStuff()"</code>)</p>
  
  <p>Here a are my different attempts:</p>
  
  <pre><code>$(function () {
  
  
           // Assign the click handler on DOM-ready
           $('a').on('click', function () {
           dateElementClicked(this);
           });
           });
  
          $(document).ready($(function () {
  
  
                  // Assign the click handler on DOM-ready
                  $('a').on('click', function () {
                      dateElementClicked(this);
                  });
              })
          );
  
          $("#anchor0").live("click", dateElementClicked($("#anchor0")));
  
          $("a").click( dateElementClicked(this));
  
  $("a").bind("click", function (event, ui){
              dateElementClicked(this);
          });
  </code></pre>
  
  <p>They all work only after an refresh. or the first one runs the function instant and interupts everything because "this" is undefined.</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>I even tried it with button and inpute type button and made extra js file. but my javascript only runs after an refresh... Putted an console log and alert in the script. So the whole script is stuck somehow</p>
  
  <p>The dateelement clicked function (I cleared this too for testing and just put an <code>alert()</code> in it)</p>
  
  <p>Here is the git link to the project: <a href="https://github.com/LosKartoflos/Apoll.git" rel="nofollow noreferrer">https://github.com/LosKartoflos/Apoll.git</a></p>
  
  <pre><code>function dateElementClicked(clickedAnchor) {
              //anchor is clicked the first time(the id number equals numberOfAppointments)
              if (clickedAnchor.id.slice(-1) == numberOfAppointments) {
                  dateElementClickedFirstTime(clickedAnchor);
              }
              else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == true)
              {
                  hideContent(getDateElementNumber(clickedAnchor));
              }
              else if (appointmentList[getDateElementNumber(clickedAnchor)]["RolledOut"] == false)
              {
                  showContent(getDateElementNumber(clickedAnchor));
              }
              else
              {
                  alert("Element not listed");
              }
          }
  </code></pre>
  
  <p>BTW: my script isin my html file. </p>