I'm using jquery mobile v1.3.2
For some reasons I want to set an global pagechange event to prepare all of my pages :
var Front = {
initDom : function($dom) {
// here i can bind some events in my page
$(".someButton",$dom).bind("tap",function(){
alert("some actions");
});
// etc.....
});
}
$(document).on("pagechange", function(event, data) {
Front.initDom($(data.toPage));
});
This works well. But it is triggered at each page change. And some times it will init the same event twice and that will lead to some bugs.
Now i have tested to do it with the event pageinit or pagecreate but both are triggered before the page is ready and $("ui-page-active"); is empty.
I have though about some setTimeout, but that's definitively a bad idea.
I have also though to init everything at the first pageinit and unbind it. But ajax called page wont be bound.
It there some good workarround ?
You can use pageinit and then get the id of the page from the event target object:
$(document).on("pageinit", function(e){
alert(e.target.id);
});
DEMO
Related
I follow this example to create a "fly to" effect.
In the example, you have to "click" a button to run the effect, i would like to run the effect when page is loaded.
I tried to "listen" the body tag with the "load" event, like this :
var flyTo = document.getElementsByTagName('body');
flyTo.addEventListener('load', function() {
It does not work.
How can I do this?
You can find the answer to your question in this thread: Javascript that executes after page load
In addition if you use jQuery you can also ensure your code is executed once the page is loaded with ready:
$( document ).ready(function() {
// Handler for .ready() called.
});
Adding my bindings to the pageinit event like so:
$('#mypage').on("pageinit", function () {
$('#login-sumbit').on('click', function () {
console.log('button clicked');
});
});
I would expect pageinit to bind the click event once only. But what happens in my single page app is that the button is binding every time the page is loaded even when clicking back.
This results in undesirable multiple duplicate binds. Any ideas on what event to use to bind only once in my single page app, so that loading the page again (back button, loading inline page) in the same session doesn't re-bind?
Looks like I found the answer myself, turns out quite rightly pageinit fires every time the page is loaded even though it's not reloading from the server, otherwise what would fire when a new page is shown.
pageinit is the right event but I need to use .one not .on, .one will bind one time only.
$('#mypage').on("pageinit", function () {
$('#login-sumbit').one('click', function () {
console.log('button clicked');
});
});
Now everything works as expected. Better still I've found you can use .one with the pageinit event for even more control over your bindings and data loads perfect for my requirements.
http://api.jquery.com/one/
You could use:
$('#login-sumbit').off('click').on('click', function(e) {
console.log('button clicked');
});
I fill list dynamically, and after that on click I have multiple calls of event. 1st time it is repeated 1 time, 2nd time 2 times, 3rd time 3 times, etc...
First, more about this problem can be found in my other answer: jQuery Mobile: document ready vs page events
Prevent multiple event binding/triggering
Because of interesting jQM loading architecture, multiple event triggering is a constant problem. For example, take a look at this code snipet:
$(document).on('pagebeforeshow','#index' ,function(e,data){
$(document).on('click', '#test-button',function(e) {
alert('Button click');
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/CCfL4/
Each time you visit page #index click event will is going to be bound to button #test-button. There are few ways to prevent this problem:
Solution 1:
Remove event before you bind it:
$('#index').live('pagebeforeshow',function(e,data){
$('#test-button').die().live('click', function(e) {
alert('Button click');
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/K8YmG/
In case you have different events bound to an object:
$('#index').live('pagebeforeshow',function(e,data){
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
});
Solution 2:
Use a jQuery Filter selector, like this:
$('#carousel div:Event(!click)').each(function(){
//If click is not bind to #carousel div do something
});
Because event filter is not a part of official jQuery framework it can be found here: http://www.codenothing.com/archives/2009/event-filter/
In a nutshell, if speed is your main concern then Solution 2 is much better then Solution 1.
Solution 3:
A new one, probably an easiest of them all.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button',function(e) {
if(e.handled !== true) // This will prevent event triggering more then once
{
alert('Clicked');
e.handled = true;
}
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/Yerv9/
Tnx to the sholsinger for this solution: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/
More info
If you want to find more about this problem take a look at this article, working examples are included.
Is there a way to replace all click event by vclick event in jQuery mobile?
The only solution I've found so far is to register a vclick event as below
$('a').bind("vclick", function (ev) {
// Do Some stuff
ev.preventDefault();
});
The problem is that this solution doesn't prevent jQuery mobile click event to fire so clicks are triggered twice
For some reason, I got the following to work:
$('a').bind('vclick click',function(e){
e.preventDefault();
//do some stuff//
})
Without the e.preventDefault() the event fires twice. With it, it only fires once (but it does fire)
This is similar to what you stated, but may be more all encompassing.
$("#elementId").bind('vclick',function(event){
event.preventDefault();
//your code..
});
this is working properly.
I have a JQuery Mobile Multi-Page layout and I want to trigger a function when a select menu on my site is changed.
Currently when the menu is changed three events fire.
I have put together an example that should show you what i'm facing.
From the main menu click Web Settings
Change the Theme option on the page
Notice the three alerts
Here is my code to register the event
$(document).bind("pagecreate", function() {
$("#settings-theme").bind("change", function(event) {
alert(event.target);
});
});
Things I have tried:
Changing the data-native-menu="false" to true removed one of the event firings.
Removed all other pages except web settings and that also reduced the number of events firing to two.
In JSFiddle, Framework Options > Head (nowrap) changed to DomReady also removed a event fire.
Update
It appears that pagecreate is fired every time a page is 'first-viewed' as well as twice when the homepage is loaded.
So by the time the settings page is loaded the event has been binded three times.. still no solution.
$(document).bind("ready", function() {
$("#settings-theme").live("change", function() {
alert("changed");
});
});
or
$(document).bind("ready", function() {
$("#pg-settings").delegate("#settings-theme", "change", function() {
alert("changed");
});
});