Buttons are not responding to clicks in Ionic

Question

I have the following button positioned absolutely over a canvas element:

<button class="left">Left</button>

This is the JavaScript that is supposed to respond to button click:

$(".left").mousedown(function() {
   leftTimer = setTimeout(moveLeft, 10);
}).mouseup(function() {
   clearTimeout(leftTimer);
});

var leftTimer,
moveLeft = function() {
  if (circleX > 0) {
    circleX -= 4;
  }
  $("h1.title").text('Clicked Left');
  leftTimer = setTimeout(moveLeft, 10);
};

I added the title line to check if there was a delay. When I click the button normally, nothing happens the title does not change. I have to keep the button pressed for some time to change the text to "Clicked Left" or to move my target element. Even then there is a considerable delay between the time I first touch the button and the time the text changes. Why is that ? Let me know if I need to provide more information.

Answer 1

You should actually have Angular with your Ionic app, and use the ng-click element on the div you want to handle.

According to the documentation, AngularJS is required :

Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.

Here is a JSBin, to make you a basic binding between your HTML and your AngularJS : https://jsbin.com/rifigakube/edit?html,js,output

If you are new to this technology here is a list to get started with AngularJS (it's pretty easy to learn if you know Javascript) :

• https://angularjs.org/
• https://docs.angularjs.org/tutorial/step_00
• http://www.w3schools.com/angular/
• https://thinkster.io/a-better-way-to-learn-angularjs
• https://egghead.io/technologies/angularjs

And finally, when you think you're confident enough with AngularJS : https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic

(I really suggest you learn AngularJS before doing the last one, or you will get stuck after)

Hope this helps.