Search code examples
windows-phone-7cordovasmartphone

Windows phone with phonegap application click event is not triggerring


I am developing app using phonegap for windows phone. When I click the button , click event is not seems to be triggering and am not able catch the event.

what could be the reason. Please help in this regard.

Sample Code

  <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
  <script type="text/javascript">
  function alertD() {
  }
  function init() {
  document.addEventListener("deviceready",onDeviceReady,false);
  $('#bb1').bind('click',function() { 
  navigator.notification.alert('clicked',alertD,'Exit','ok');
  });
  }
  // once the device ready event fires, you can safely do your thing! -jm
  function onDeviceReady(){
  document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready!";
  }
  </script>
  </head>
  <body onLoad="init();">
  <h1> Page </h1>
  <input type="button"  name="b1" id="bb1" value="event" />
  <h1>Hello PhoneGap</h1>
  <div id="welcomeMsg"></div>
  </body>

Solution

  • Try moving the bind into the deviceReady, also you need to have jquery to use $().bind, otherwise you need to use native addEventListener

    function init() {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
    function onDeviceReady(){
        document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready!";
    
        // add the clickHandler function to the click event on #bb1
        document.getElementById("bb1").addEventListener('click', clickHandler);
    }
    
    function clickHandler() {
        navigator.notification.alert('clicked',alertD,'Exit','ok');
    }
    

    One other thing, you should use touchstart or touchend for mobile applications, not the click event, as that has a 300ms delay whilst waiting to see if it's a double click.

    In this case, touchEnd would probably be better.

        document.getElementById("bb1").addEventListener('touchend', clickHandler);