jQuery Mobile delegate vs live vs bind

jquery, jquery-mobile

Solution

You would bind to a "page event" that jQuery Mobile exposes, like `pageinit`:

$(document).delegate('#my-page', 'pageinit', function () {
    //this is like document.ready for this pseudo-page
});

Since you're using jQuery Core 1.7.1 you can use `.on()` which has a slightly different syntax:

$(document).on('pageinit', '#my-page', function () {
    //this is like document.ready for this pseudo-page
});

All three of your methods do similar things. `.live()` is the same thing as using `.delegate()` with `document` as the root selection but it's been depreciated so it's a good idea to stop using it (source: http://api.jquery.com/on). Using `.bind()` directly on the `document` element is the same as using `.delegate()` but when you use `.bind()` you have to determine which pseudo-page had the event fired on it in the event handler rather than in the function call.

For example:

$(document).bind('pageshow', function () {
    var id = $.mobile.activePage[0].id;
    //you can use $.mobile.activePage to do work on the current page
});

In general, event delegation is used when we don't know when an element will exist in the DOM. It relies on events bubbling up the DOM until they get to the root selection (in your case it's always the `document` element).

Docs for `.delegate()`: http://api.jquery.com/delegate

For more general information about the difference between these functions, see this article (I've read it to check it for accuracy and it's right-on): http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

Problem

I can't seem to wrap my head around the differences between the following in jQuery Mobile: ``` $( document ).live('pageshow', function(event) { }); $( document ).bind('pageshow', function(event) { }); $( document ).delegate("#page", "pageshow", function() { }); ``` How do I execute scripts in the head of my documents that are DIFFERENT in certain pages? Which methods do I use to call those scripts? Update: jQuery version: 1.7.1 jQuery Mobile version: 1.1.0

Original source