Rectangle 27 92

Try calling .trigger("create") on the element with the new content.

According to the jQuery Mobile docs, "The create event is suited for enhancing raw markup that contains one or more widgets."

EDIT: As of jQuery Mobile 1.4, .trigger('create') is deprecated, and you should use .enhanceWithin() instead. (Thanks to John Mc for the heads-up.)

Yes! That did the trick! Thanks also for pointing out the documentation.

This isn't working for me. I tried using 1.0 stable and the nightly build. Any suggestions? I've tried using .page(), .page("refresh"), .trigger("create"). Never any errors, but no styling applied.

@snipe: I think you need to make sure you trigger when the new contents have been inserted on the DOM.

@snipe - Try triggering the trigger."create" event on the parent element.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 92

Try calling .trigger("create") on the element with the new content.

According to the jQuery Mobile docs, "The create event is suited for enhancing raw markup that contains one or more widgets."

EDIT: As of jQuery Mobile 1.4, .trigger('create') is deprecated, and you should use .enhanceWithin() instead. (Thanks to John Mc for the heads-up.)

Yes! That did the trick! Thanks also for pointing out the documentation.

This isn't working for me. I tried using 1.0 stable and the nightly build. Any suggestions? I've tried using .page(), .page("refresh"), .trigger("create"). Never any errors, but no styling applied.

@snipe: I think you need to make sure you trigger when the new contents have been inserted on the DOM.

@snipe - Try triggering the trigger."create" event on the parent element.

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 33

This worked for me for the list view

$('ul').listview('refresh');

Also you can refresh the collapsible

$('#element').collapsibleset('refresh')

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 33

This worked for me for the list view

$('ul').listview('refresh');

Also you can refresh the collapsible

$('#element').collapsibleset('refresh')

ajax - jQuery Mobile does not apply styles after dynamically adding co...

ajax jquery-mobile
Rectangle 27 13

aboutPage should be the id of the page.(i.e.div with data-role="page").live() attaches the funcion you have defined which contains thealert to the pageinit event of aboutPage.pageinit is triggered on a page when the page is initialized.

it will execute the alert statement when aboutPage is initialized

The page might be initialized even if it is not in view.So even before you go to that page,the pageinit of the div will be triggered.If you are loading another html file as the new page pageinit for that page will be triggered only when you load that page into view.So,in your case if you want to do something when your div comes into view,you can try the pagebeforeshow and pageshow.pagebeforeshow will be triggered on the new page before animation starts and pageshow after animation is over.

Yup. That is what I guessed it would be and I tried hooking up pageinit event on div with data-role="page" but for some reason the method is not getting called the first time I transition to a page. When I hit refresh the method gets called.

Figured it out. Every page had it's own javascript to hook up 'pageshow' events. However I was using $.mobile.changePage which only loads a div with data-role=page and nothing else on that page (including inline javascript) gets executed. Here is the answer that helped me stackoverflow.com/questions/7449402/

page init - jQuery Mobile - binding to pageinit event - Stack Overflow

jquery-mobile page-init
Rectangle 27 2

$(document).on('pagebeforeshow', '#yourPageID', function(){     
    // Registering button click  
    $('#myButtonID').bind('click',function(){
       $.mobile.changePage('yourfile.html');
    });
});

if you just wrap it inside your <script></script> tag the event will not fire.

Did you get any error in the console? Check DDMS for it.

Phonegap - jquery Mobile : button click event not able catch in androi...

android jquery jquery-mobile cordova
Rectangle 27 4

In case your second page javascript is placed inside a HEAD content

If I understood you correctly, you are using ajax to load this page into the DOM? If this is true then I understand your problem. You see, when ajax is used for page loading only BODY content is loaded into the DOM.

You can fix your problem if you initialize your second html page javascript inside a first HTML file or move your SCRIPT block inside a second HTML BODY content.

Also, I have described this problem in my other ARTICLE with more details and few examples, or it can be found HERE.

This could also be a little different problem. You see, if you have 2 buttons with a same id, they are both inside a DOM structure. If you try to bind a click event on a second page button, that same event will be bound to the button on a first page. Because they have a same id jQuery will bound an event to the first button (with that id) found in the DOM.

To fix this problem you need to use a jQM constructor called active page. One more warning, next code example will work only in a page events initialized after a pageinit event, for example pagebeforeshow or pageshow events:

$(document).on('pagebeforeshow', '#yourPageID', function(){     
    // Registering button click  
    $(document).on('click', $.mobile.activePage.find('#myButtonID'), function(){
        // Do something
    });
});

This line of code:

$.mobile.activePage.find('#myButtonID')

Will only get button '#myButtonID' found in a current active page, no matter how many other buttons with a same id exist inside the DOM.

About your last questions. It doesn't matter which template structure you use (1 HTML with multiple pages or multiple HTML's), you just need to worry about things I mentioned before.

Phonegap - jquery Mobile : button click event not able catch in androi...

android jquery jquery-mobile cordova
Rectangle 27 57

mobileinit

Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.

Here is the proper format for binding to the mobileinit event:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>

First the jQuery Core (so .bind() will be available), then the mobileinit event handler, then the jQuery Mobile js file (this is last so the event handler for mobileinit will be set before the event is fired).

You can test that your current mobileinit event handler is not firing by putting an alert in the function.

Perfect - I had a similar problem with a HTTP Location header which got AJAXified :-( - of course you can't set a rel="external" attribute on such a header...

Worked for me when the action attribute on a form redirected to a page without jQuery UI, and ajax was forcing jQuery UI styles onto it.

javascript - How To Disable Ajax In jQuery Mobile Before Page Load? - ...

javascript jquery html ajax jquery-mobile
Rectangle 27 7

You can use jQuery Mobile vclick event:

Normalized event for handling touchend or mouse click events on touch devices.

$(document).ready(function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
 });

should we include the jquery.mobile.js for that? will it create any javascript conflict with the jquery.js file?

android - jQuery click event not working in mobile browsers - Stack Ov...

jquery android ipad mobile
Rectangle 27 46

If you want to use jQuery mobile for touch events only, add this piece of script before you load the jQuery mobile library:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

This prevents jquery mobile from initializing the page and touching the DOM, thus leaving your layout alone.

Hi eivers. This was a great help to me, but I was still frustrated because my site relies heavily on onhashchange for navigation and jQuery mobile was changing #'s to /. You might include a link to stackoverflow.com/a/8159996/3917091 which suggests adding $.mobile.pushStateEnabled = false;, because it is still on with mobileinit.

How to use jQuery Mobile for its touch event support only (no UI enhan...

jquery jquery-mobile
Rectangle 27 46

If you want to use jQuery mobile for touch events only, add this piece of script before you load the jQuery mobile library:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

This prevents jquery mobile from initializing the page and touching the DOM, thus leaving your layout alone.

Hi eivers. This was a great help to me, but I was still frustrated because my site relies heavily on onhashchange for navigation and jQuery mobile was changing #'s to /. You might include a link to stackoverflow.com/a/8159996/3917091 which suggests adding $.mobile.pushStateEnabled = false;, because it is still on with mobileinit.

How to use jQuery Mobile for its touch event support only (no UI enhan...

jquery jquery-mobile
Rectangle 27 7

If you find that the button down/hover state (lists, buttons, links etc) feels sluggish the $.mobile.buttonMarkup.hoverDelay setting might be of use. It will decrease the time between the touch event and the application of the relevant class but will also result in a higher chance that the same class will be applied even when the user is scrolling (eg, over a long list of links).

$( document ).bind( "mobileinit", function() {
    $.mobile.buttonMarkup.hoverDelay = 500
});

android - jQuery mobile button press event slow to process - Stack Ove...

android ios cordova jquery-mobile
Rectangle 27 22

Various ways of event binding with jQuery

First thing first, mobileinit event should not be used for event binding. While it CAN be used like that mobileinit was not created for that purpose. It was created for jQuery Mobile parameter auto-initialization, so it should not be used for event binding.

$(document).on('click', '#one1', function(e){
    console.log('firing');
});

This first example is something new that came to use first with now deprecated method live. Basically it's an event delegation mechanism that allows you to bind event handlers not just to all existing instances of a given node type, but also to any future instances of a given node type (by "type" I mean a set of DOM nodes matched by a given jQuery selector). What I want to say here is, during the event binding that element don't need to exist in a DOM, basically this method works by binding event handlers to the document itself and then reacting to all the events that bubble up through the DOM. So it doesn't matter if element #one1 exist or not during the event binding. You can create it dynamically later and it will still work.

$('#one1').on("click", function() {
    console.log('not firing');
});

This is on old way of event binding. It requires that event exists in the DOM before event can be bind. In your case you were trying to bind this click event to the element that didn't exist in a DOM at that point in time. It doesn't matter it was loaded after the binding process.

Take a look at this example. There you will see 5 different ways of click event binding in jQuery Mobile:

  • 2 click event are bound in HEAD, before page is initialized into the DOM
  • 2 click events are bound in HEAD in pagebeforeshow event, basically this is also a delegation of binding because event are bound when page is about to be shown and already inside a DOM
  • 1 click event is bound in a BODY after all page content. Because all content is loaded inside a DOM at this point this click event will work.
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
                $(document).on('click', '#one1', function(e){
                    // This example will work because it was bind with event delegation process
                    console.log('Firing 1');
                });
                $('#one1').on("click", function() {
                    // This example will not work because event do not exist in this moment
                    console.log('Not firing');
                });
                $(document).on( "pagebeforeshow", function() {
                    // This example will work because it was bind with event delegation process            
                    $(document).on('click', '#one1', function(e){
                        console.log('Firing 2');
                    });
                    // This example will work because element exist in a DOM during the pagebeforeshow event
                    $('#one1').on("click", function() {
                        console.log('Firing 3');
                    });
                });             
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <a href="#" id="one1" data-role="button">[one]</a>
            </div>
        </div>    
        <script>
            $('#one1').on("click", function() {
                // This example will  work because we are binding it when element is already loaded into the DOM
                console.log('Firing 4');
            });            
        </script>
    </body>
</html>
  • Do not use mobileinit event for event binding, it will trigger before page is loaded into the DOM and only events bind with delegation will work.
  • Bind your events in a correct jQuery Mobile page events.

While live method is deprecated on method should be used instead. In some benchmarks on method is 2x faster.

jQuery click event not firing in jQueryMobile - Stack Overflow

jquery-mobile jquery jquery-mobile-button
Rectangle 27 49

Nice little jquery plugin that I've used on projects before with a big range of events to bind to:

orientationchange The device is turned clockwise or counterclockwise. This event is triggered by the device and might use an internal gyroscope.

pinch Is triggered during a pinch gesture (two fingers moving away from or towards each other).

rotate Is triggered during a rotation gesture (two fingers rotating clockwise or counterclockwise).

swipemove Is triggered during a swipe move gesture (finger(s) being moved around the device, e.g. dragging)

swipeone Is triggered after a swipe move gesture with one touchpoint (one finger was moved around the device)

swipetwo Is triggered after a swipe move gesture with two touchpoints (two fingers were moved around the device)

swipethree Is triggered after a swipe move gesture with three touchpoints (three fingers were moved around the device)

swipefour Is triggered after a swipe move gesture with four touchpoints (four fingers were moved around the device)

swiperightup Is triggered after a rightwards and upwards swipe move gesture

swiperight Is triggered after a strict rightwards swipe move gesture

swiperightdown Is triggered after a rig*htwards and downwards swipe move gesture

swipedown Is triggered after a strict downwards swipe move gesture

swipeleftdown Is triggered after a leftwards and downwards swipe move gesture

swipeleft Is triggered after a strict leftwards swipe move gesture

swipeleftup Is triggered after a leftwards and upwards swipe move gesture

tapone Is triggered after a single (one finger) tap gesture

taptwo Is triggered after a double (two finger) tap gesture

tapthree Is triggered after a tripple (three finger) tap gesture

pinchopen Is triggered when a pinchopen gesture (two fingers moving away from each other) occured and the touchpoints (fingers) are removed the device.

pinchclose Is triggered when a pinchclose gesture (two fingers moving towards each other) occured and the touchpoints (fingers) are removed the device.

rotatecw Is triggered when a clockwise rotation gesture (two fingers rotating clockwise) occured and the touchpoints (fingers) are removed the device.

rotateccw Is triggered when a counterclockwise rotation gesture (two fingers rotating counterclockwise) occured and the touchpoints (fingers) are removed the device.

this doesn't works on touch laptops or touch tablets with 1080p display ... strange :(

@Sijav May be worth reporting that to the jgestures guys :)

How to use jQuery Mobile for its touch event support only (no UI enhan...

jquery jquery-mobile
Rectangle 27 49

Nice little jquery plugin that I've used on projects before with a big range of events to bind to:

orientationchange The device is turned clockwise or counterclockwise. This event is triggered by the device and might use an internal gyroscope.

pinch Is triggered during a pinch gesture (two fingers moving away from or towards each other).

rotate Is triggered during a rotation gesture (two fingers rotating clockwise or counterclockwise).

swipemove Is triggered during a swipe move gesture (finger(s) being moved around the device, e.g. dragging)

swipeone Is triggered after a swipe move gesture with one touchpoint (one finger was moved around the device)

swipetwo Is triggered after a swipe move gesture with two touchpoints (two fingers were moved around the device)

swipethree Is triggered after a swipe move gesture with three touchpoints (three fingers were moved around the device)

swipefour Is triggered after a swipe move gesture with four touchpoints (four fingers were moved around the device)

swiperightup Is triggered after a rightwards and upwards swipe move gesture

swiperight Is triggered after a strict rightwards swipe move gesture

swiperightdown Is triggered after a rig*htwards and downwards swipe move gesture

swipedown Is triggered after a strict downwards swipe move gesture

swipeleftdown Is triggered after a leftwards and downwards swipe move gesture

swipeleft Is triggered after a strict leftwards swipe move gesture

swipeleftup Is triggered after a leftwards and upwards swipe move gesture

tapone Is triggered after a single (one finger) tap gesture

taptwo Is triggered after a double (two finger) tap gesture

tapthree Is triggered after a tripple (three finger) tap gesture

pinchopen Is triggered when a pinchopen gesture (two fingers moving away from each other) occured and the touchpoints (fingers) are removed the device.

pinchclose Is triggered when a pinchclose gesture (two fingers moving towards each other) occured and the touchpoints (fingers) are removed the device.

rotatecw Is triggered when a clockwise rotation gesture (two fingers rotating clockwise) occured and the touchpoints (fingers) are removed the device.

rotateccw Is triggered when a counterclockwise rotation gesture (two fingers rotating counterclockwise) occured and the touchpoints (fingers) are removed the device.

this doesn't works on touch laptops or touch tablets with 1080p display ... strange :(

@Sijav May be worth reporting that to the jgestures guys :)

How to use jQuery Mobile for its touch event support only (no UI enhan...

jquery jquery-mobile
Rectangle 27 33

Click events work a little differently on touch enabled devices. There is no mouse, so technically there is no click. According to this article - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - due to memory limitations, click events are only emulated and dispatched from anchor and input elements. Any other element could use touch events, or have click events manually initialized by adding a handler to the raw html element, for example, to force click events on list items:

$('li').each(function(){
    this.onclick = function() {}
});

On your case, you could just change the listener to the anchor element as very well put by @mason81, or use a touch event on the li:

$('.menu').on('touchstart', '.publications', function(){
    $('#filter_wrapper').show();
});

This is fantastic advise for anyone looking to use jQuery without the jQuery Mobile overhead. First example works perfectly. Thank you Hugo.

Worked with touchstart. Thanks for share

Very interesting. I had a simple overlay that wasn't disappearing on click. This fixed it. Thank you.

worked with touchstart on flexslider for some youtube stopping thing i'm doing! thanks!!

android - jQuery click event not working in mobile browsers - Stack Ov...

jquery android ipad mobile
Rectangle 27 31

jQuery Mobile now has a Download Builder that lets you select only the parts that you want, in this case, you only need to select the Touch checkbox under the Event section.

How to use jQuery Mobile for its touch event support only (no UI enhan...

jquery jquery-mobile
Rectangle 27 31

jQuery Mobile now has a Download Builder that lets you select only the parts that you want, in this case, you only need to select the Touch checkbox under the Event section.

How to use jQuery Mobile for its touch event support only (no UI enhan...

jquery jquery-mobile
Rectangle 27 3

Solution 2 - jQuery Mobile solution

In case of jQuery Mobile there are few solutions, but one will work in your case.

Instead of tap event you should use touchstart event. It works like tap and at the same time it is a first event to trigger during the screen swipe.

While touchstart is a good all around solution, it wont work on older Android devices using older jQuery Mobile versions (1.1 and below).

So if you need to create a bulletproof version you should use vmousedown event instead of touchstart.

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('vmousedown', '#index', function(){       
        alert('vmousedown');
    });
});

jquery - Tap event only works when finger doesnt slide - Stack Overflo...

jquery cordova jquery-mobile
Rectangle 27 5

Bind into the pagebeforeshow event of the pages to check if the user is logged on - check if credentials are present in local storage.

If user is not logged on you can either call preventDefault to stop the pageChange or better redirect the user to a loggedOffPage by modifying the toPage passed into the handler.

Page change events

authentication - jQuery mobile and PhoneGap using sessions to ensure u...

authentication jquery-mobile cordova