Question

I want to toggle a list with a button that is located in the header of my JQM site.

This code is working only when the page first loads. Once I load another page, the toggle function is being ignored (though if I put an alert in, that seems to work).

I have included the script inside the data-role="page" element.

$(document).bind('pageinit', function (){
    $("#trigger-menu").toggle(function(e) {
          $("ul#menu-list").show();
          //change icon here
          e.preventDefault();
    }, function(e) {
          $("ul#menu-list").hide();
          //change icon here
          e.preventDefault();
    });
});

Is ‘pageinit’ the appropriate event to use in this instance?
I am using JQM 1.2.0

Answer 1

The behavior you described is the expected one for the pageinit event, which occurs only once per page.

If you want to toggle your list on every page transition, after animations have completed, I suggest you use the pageshow event:

$('div').live('pageshow', function(event, ui) {
    alert('This page was just hidden: '+ ui.prevPage);
});

For more details, please take a look at the jQuery mobile events documentation here.