I have a Phonegap App, using jQuery and jQuery Mobile.
In some page I’ve bound a function to a tap event, but the function is triggered when the page loads.
After debuging a little (using arguments.callee.caller.caller.toString()) I discovered that, for some crazy reason, a click event is being triggered in that button just when the page is loaded.
When I changed the footer’s class, the problem had gone (also my styling), then I changed the class references in my CSS file to match the new footer class, the problem came back. This is very strange, maybe it have something with my CSS.
There’s no any other reference to "footer_body" in my project.
If I set the function calls directly on the HTML(something like <span onClick="javascript:obj.leftMethod()">), I have the same behavior.
For sure it’s a Phonegap/Android issue, as this doesn’t happen in a PC browser (besides I have to comment a lot of code which only work in mobile).
Here’s the code:
HTML:
<div class="footer_body">
<span class="left"><span>Text 1</span></span>
<span class="right"><span>Text 2</span></span>
</div>
JS/jQuery:
function PageClass() {
...
// called when the page is loaded
this.init = function() {
$(".footer_body", "#page_2").find(".left").unbind("tap").bind("tap", function() {
that.leftMethod();
});
$(".footer_body", "#page_2").find(".right").unbind("tap").bind("tap", function() {
that.rightMethod();
});
// that is a reference to "this" of the class
}
}
Question near to be solved. The real problem is that all touch events are being carried to the next pages. I didn’t noticed that before, seemed it were something like a auto click, but was the previous screen touch event that triggered the current page touch event.
Sure it’s a Android or Phonegap bug – More info about it here, in case of someone have the same perception I had from this problem.
I still in need of a concrete solution, but I’m tired of investigating this, so I temporarily solved this setting a short delay to activate the listener functions.