title: jQuery Mobile: Why are onClick and onKeyPress events not working?
body: <p>In my jQuery Mobile code, I have some onClick and onKeyPress events but they are not firing. I am converting my client's website to a mobile version that includes lot of javascript functions. I don't know if it works if I convert everything into jQuery but I prefer not to do so and would like to keep the javascript functions as it is.</p>
  
  <p>Is there a way to make this work entirely with javascript and not with jQuery?</p>
  
  <p><code>onClick="javascript:alert('test');"</code> seems to work fine. It's just the functions that are not being called.</p>
  
  <p><a href="http://jsfiddle.net/jetlag/CtkTV/1/" rel="nofollow">http://jsfiddle.net/jetlag/CtkTV/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-role="fieldcontain"&gt;
    &lt;label for="textA"&gt;Input A&lt;/label&gt;
    &lt;input class="inputField" id="textA" value="" type="text" onFocus="javascript:clearText(this);" value="This is default text A" /&gt;
  &lt;/div&gt;
  &lt;div data-role="fieldcontain"&gt;
    &lt;label for="textB"&gt;Input B&lt;/label&gt;
    &lt;input class="inputField" id="textB" value="" type="text" onKeyPress="javascript:keyPressEvent(e);" onFocus="javascript:clearText(this);" value="This is default text B" /&gt;
   &lt;/div&gt;
   &lt;div class="ui-grid-b"&gt;
     &lt;div class="ui-block-a"&gt;&lt;input type="button" id="goButton" onClick="javascript:goButtonPress();" value="Go" /&gt;
     &lt;/div&gt;
     &lt;div class="ui-block-b"&gt;&lt;input type="button" id="testButton" onClick="javascript:alert('Alerted!');" value="Alert" /&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function keyPressEvent(e) {
    var evt = e || window.event;
    var keyPressed = evt.which || evt.keyCode;
    if (keyPressed == 13) {
      document.getElementById('goButton').click();
      evt.cancel = true;
    }
  }
  
  function goButtonPress() {
    alert('Button Pressed");
  }
  </code></pre>