Show jquery mobile dialog only once on startup (web app)

Question

My problem is that following code works fine (dialog show once on startup), but when I navigate to another page (with standard ajax activated), and then navigate back to the first page, the dialog is showing again (and then in a loop manner when I click "dismiss").

What am I doing wrong?

Code looks like that:

$(document).on('pageinit', '#pageindex', function(event) {
        setTimeout(function(){
            $('#dialog').click();
            $('#dialog').remove();
        },1000);
});

Answer 1

For a quick fix, replace .on with .one . However, normally pageinit event should fire once only, so there must be something causing it to fire multiple times.

Answer 2

The following code is executed once on single/multipage page and multiple pages approach:

$(document).on('pageinit', '#pageindex', function (event) {
    $(this).off(event);
    setTimeout(function () {
        $('#dialog').click();
        $('#dialog').remove();
    }, 1000);
});