Menu
I have a very simple use case on my index page.
<script src="js/jquery-min.js"></script>
<script src="js/jquery-mobile.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script>
$("body").on("swipeleft", function(event) {
alert('hello');
/*window.location.href = "html/first.html";*/
});
</script>
For some reason this event is firing 2 times. Now I am sure I haven't binded another event on the body tag as this is the first page. I have tried other simple events also like touchstart etc. They all are firing twice. What am I doing wrong ?
Update :-
I have modified the answer I marked as correct in the following way and it worked. The events on this page are not firing twice.
<head>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.autoInitializePage = false;
$.mobile.defaultPageTransition = 'none';
$.mobile.touchOverflowEnabled = false;
$.mobile.defaultDialogTransition = 'none';
$.mobile.loadingMessage = '' ;
});
</script>
<script type="text/javascript" src="js/jquery-mobile.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>
227
There are few ways of avoiding this problem. Like CodeJack told you this is a know issue but it is not an error, mainly because of the jQM unique way of handling pages.
Easiest one is to unbind an event before binding it again, like this:
$("body").off().on("swipeleft", function(event) {
alert('hello');
/*window.location.href = "html/first.html";*/
});
In case you have other events bound to same object use this:
$("body").off("swipeleft").on("swipeleft", function(event) {
alert('hello');
/*window.location.href = "html/first.html";*/
});
There is an alternative to using event bind/unbind, live/die and on/off. Instead of unbinding before you bind it again use jQuery event filter, it can be used to identify if event is already been bind. Don't forget to download it from link posted below (it is not a standard part of jQM).
http://www.codenothing.com/archives/2009/event-filter/
This is my usage example:
$('#carousel div:Event(!click)').each(function(){
//If click is not bind to #carousel div do something
});
I am using each because my carousel div has many inner blocks but principle is the same. If #carousel inner div elements don't have click event add them that event. In your case this will prevent multiple event binding.
Additional solutions can be found here.
145
You should try using document ready event to attach events to body. Also you may want to attach an event only once to body.
$(document).ready(function(){
$("body").off().on("swipeleft", function(event) {
alert('hello');
});
});
In case you have other events bound to same object use this:
$(document).ready(function(){
$("body").off("swipeleft").on("swipeleft", function(event) {
alert('hello');
});
});
This is known issue...i found it to avoid by moving the js code inside <head> tag..i donno the reason..but that avoided the problem...
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
