cordova/phonegap onclick doesn't work

Question

I try to create button which starts an alert after a click event. Something like that :

    <body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>

        </div>
        <button onclick="alert('salut')" id="boutonAlerte">Alerte</button>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script> </body>

but the problem is that my onclick doesn't work. A lot of people tell me to try it on javascript so I've decided to write something like that :

function onAlertClick() {
  alert("ceci est une alerte");
}

alert("test2");

var bA = document.getElementById("boutonAlerte");
bA.addEventListener("onclick", onAlertClick());

But this is the same thing.

Any ideas ?

Did you tried [this](http://stackoverflow.com/a/16777521/1513547) — Tan Li Hau, Apr 24 '16 at 23:03
no, because I don't use JQuerry, but why not, I think Jquerry could be a great solution — Couim, Apr 25 '16 at 12:18
doesn't work with touchend and jQuerry. May be because of the jQuerry version ? (I've the last, 2.2.3) — Couim, Apr 25 '16 at 15:18

Kirankumar Dafda · Accepted Answer · 2016-04-26T05:42:03.980

2

Try adding jQuery click event, which are working fine with my cordova apps

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>

<script type="text/javascript">
   $("#boutonAlerte").click(function(){
       alert("ceci est une alerte");
   });
</script>

Here is JSFiddle link

https://jsfiddle.net/9v85ku5y/

edited Apr 26 '16 at 05:42

answered Apr 25 '16 at 12:23

Kirankumar Dafda

2,354
5
29
56

I have updated jQuery src with the latest one so please have a look – Kirankumar Dafda Apr 25 '16 at 12:26
It doesn't work with the last jq version when I use `$("#boutonAlerte").on("touchend", function() { alert("clicked"); });` – Couim Apr 25 '16 at 15:13
Thanks, it works on the website, I have to try on my Cordova app? – Couim Apr 26 '16 at 06:11
I had a try making simple demo app with the same code I have shared here, and its working fine with the jQuery Click event so try creating demo app and let me know if this is working or not. – Kirankumar Dafda Apr 26 '16 at 06:23
Great, If this is suitable answer for your question and requirement then you can select this as a right answer, thanks – Kirankumar Dafda Apr 26 '16 at 08:19
yes of course, I don't know if I can because I've only 14 points ;) – Couim Apr 26 '16 at 08:36

score 2 · Answer 2 · edited May 24 '17 at 18:02

2

Solution

// Function to change the content of t2

function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table

var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

edited May 24 '17 at 18:02

Shawn Mehan

4,513
9
31
51

answered May 24 '17 at 15:55

Tibor Fiák

21
3

score 1 · Answer 3 · answered Apr 25 '16 at 03:22

onclick is not fired on cordova apps, because users don't "click", instead, they "tap". You may use a decent mobile framework like Ionic, and use ng-click, it automatically solves the problem for you, because it includes ngTouch.

If you prefer not to use a big framework like angular, you may use Zepto.js, and use $(".element").on('tap', callback); to listen for tap events. Or $(".element").on('tap click', callback); to listen for both tap and click events.

Chrome dev tools has good mobile emulation, to trigger tap events. It may be helpful if you want to debug you app in Chrome.

score 1 · Answer 4 · answered Aug 06 '21 at 20:01

I hear about a click to make "click" event to work. The trick is adding the css cursor property to "pointer" in that way, when the user tap triggers the click event.

Here is some example using this trick:

function clickEvent(element, callback){
    element.setAttribute("style", "cursor: pointer;");
    element.addEventListener("click", callback);
}

clickEvent(document.getElementById("mybutton"), function(){
    alert("Clicked");
});

By using the function "clickEvent" you can get the "click" to work

score 0 · Answer 5 · answered Apr 25 '16 at 05:16

Define a clickhandler that you can use later on:

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

This will trigger click on non-touch devices and touchstart on touch devices.

When that is said, I will strongly recommend using Fast click instead, and use regular click-events. With the above solution, you will trigger "touchstart" on links when you swipe on it to scroll the page for instance - which is not ideal.

Thanks for your answer. I'll try it this evening. Is it JQuerry ? — Couim, Apr 25 '16 at 07:31

Lotus91 · Answer 6 · 2016-04-25T12:36:45.143

You can try to do the following:

$("#boutonAlerte").on('click', function(){ 
 alert("Clicked!");
});

Then remove the onclick from your button tag and make sure that you included the jQuery library in your HTML o course.

If you want to use JavaScript only you should do :

<button onclick="myFunction();" id="boutonAlerte">Alerte</button>

<script> 
  function myFunction(){
   alert("clicked!");
  }
</script>

score 0 · Answer 7 · answered Aug 15 '18 at 08:52

Here is a jQuery example

html

            <a href="#" class="start-button">EXECUTE</a>

jquery

$(".start-button").click(function (e) {  //note that 'onclick="HandleExec();return false;" doesnt work
    e.preventDefault();
    // here you can handle the click code you wanted
});

make sure that you call event.preventDefault(); so it doesn't try to go to the href in the html tag. That will just reload the cordova app in this case.

score 0 · Answer 8 · answered Aug 16 '18 at 09:44

The solution is quite simple, actually. All elements, that you would like to have the click event working on, should have the CSS rule "cursor: pointer;"

You can find a working example here: https://haensel.pro/apache-cordova/apache-cordova-ios-click-event-not-working-quick-how-to

cordova/phonegap onclick doesn't work

8 Answers8

Linked