jQuery mobile, on is not working with listview loaded pages, what can I do?

Question

I have made a listview with jQuery mobile, and I have an event

$("#id").on("click"...

the element $("#id") is created after load a new page, this page is loaded when you choose an element of the list (all is automatic, made by the listview funcitions of jquery), but the "on" don't works

I need fire an event after load the new page, what can I do?

Thank you.

Answer 1

As per the documents, you need to listen to two events pagecontainerhide and pagecontainershow.

The first event, provides all data related to next page. The second event, provides data related to previous page.

The odd issue, is that those events no longer accept to be bound to a page id.

$(document).on("pagecontainerhide", function (e, ui) {
  console.log("Next Page "+ ui.nextPage[0].id);
});

$(document).on("pagecontainershow", function (e, ui) {
  console.log("Previous Page "+ ui.prevPage[0].id);
});

Demo