Bind('pageinit') fails to call method

Question

I'm trying to bind a page initialize event from, afaik, jquerymobile, to a method so I can set my header, this is done, because later I wish to set it dynamically. But my event doesn't even trigger :'-( Any help would be appreciated.

$('#mapmode').bind('pageinit', function(event) {
    initPageHeader();
});

function initPageHeader(){
    alert('oldhtml');
    var oldhtml=document.getElementById('header').innerHTML;
    document.getElementById('header').innerHTML="";
    var html = oldthml + '<a href="#" data-rel="back" data-role="button" ><img'+
    ' align="middle"src="../images/back.png" alt="back" vspace="2"/></a><h1>'+
    '<img align="middle"src="../images/main_header.png" alt="logo" vspace="2"/>'+
    '</h1><a href="#first" data-role="button" data-inline="true">'+
    '<img align="middle"src="../images/home.png" '+
    'alt="picture to take you to the first page"/></a>'
    document.getElementById('header').innerHTML=html;
}

http://stackoverflow.com/questions/7729729/jquery-mobile-binding-to-pageinit-event — Neil, Jul 13 '12 at 09:26
Thanks inkbug, wasn't the problem though :) changed it to 'oldhtml'. still doesn't trigger, but lots of ideas below. Digging in to them now. — Anders Metnik, Jul 13 '12 at 09:34

Frédéric Hamidi · Accepted Answer · 2012-07-13T09:39:21.120

1

If you want to bind to pageinit instead of using event delegation, you have to do that on the document itself:

$(document).on("pageinit", function(event) {
    initPageHeader();
});

If this behavior is specific to the #mapmode page, then event delegation is the way to go:

$(document).on("pageinit", "#mapmode", function(event) {
    initPageHeader();
});

In passing, proper use of jQuery can make your event handler shorter and more readable:

function initPageHeader()
{
    $("#header").html(function(index, originalMarkup) {
        return originalMarkup
            + '<a href="#" data-rel="back" data-role="button">'
            + '<img align="middle" src="../images/back.png" alt="back" '
            + 'vspace="2"/></a><h1><img align="middle" '
            + 'src="../images/main_header.png" alt="logo" vspace="2"/>'
            + '</h1><a href="#first" data-role="button" data-inline="true">'
            + '<img align="middle"src="../images/home.png" '
            + 'alt="picture to take you to the first page"/></a>';
    });
}

edited Jul 13 '12 at 09:39

answered Jul 13 '12 at 09:29

Frédéric Hamidi

258,201
41
486
479

Thats the incorrect use of on for a bind isn't it? `$(document)` is used to replace the `.live()` functionality. – Jeemusu Jul 13 '12 at 09:30
@Jeemusu, the code that was in your comment was equivalent to `bind()`, not `delegate()` or `live()`. See http://stackoverflow.com/questions/11296530/jquery-onclick-vs-click-and-delegateclick. – Frédéric Hamidi Jul 13 '12 at 09:31
Does this override normal launch functionality of my page? because now it only launches this method and does nothing else? – Anders Metnik Jul 13 '12 at 09:38
1

@Anders, it should not override any other `pageinit` handlers. The first code snippet in my answer will run for every page, the second one will run only when `#mapmode` is initialized. – Frédéric Hamidi Jul 13 '12 at 09:41
Awesome last function :D Thanks! Btw you know if there is any way to set a maxheight on pageheader, and squeeze the images to fit? – Anders Metnik Jul 13 '12 at 09:57
@Anders, thanks :) Your `max-height` issue is not really related and would warrant another question IMHO (I don't have an instant answer handy for that one). – Frédéric Hamidi Jul 13 '12 at 10:04
Hmm seems like your initpageheader function doesn't raelly work :-( – Anders Metnik Jul 13 '12 at 10:48
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13841/discussion-between-anders-metnik-and-frederic-hamidi) – Anders Metnik Jul 13 '12 at 10:48
Ahh forgot the return statement after removing originalmarkup, :D – Anders Metnik Jul 13 '12 at 11:07

score 0 · Answer 2 · answered Jul 13 '12 at 09:28

0

You need to have your alert(oldhtml); before you set it. Move it above your document.getElementById('header').innerHTML=html;

As suggested by jeemusu below you can find out more about jQuery .on as bind is being deprecated.

answered Jul 13 '12 at 09:28

Undefined

11,234
5
37
62

Also bind is also depreciated. Try using `.on()` instead. – Jeemusu Jul 13 '12 at 09:29

Bind('pageinit') fails to call method

2 Answers2