Pointer sur un élément DOM d'une page non chargée

Bonjour à tous,

J'utilise phonegap + Jquery mobile en me basant sur cet exemple :
http://www.raymondcamden.com/index.c...tabase-Support

Un fichier main.js est chargé par la page index.html.

Dans le main.js, il y'a un code qui appelle une méthode lors du submit d'une autre page, edit.html

Code:

---

1 2 3 4 5 6 7 8 9 10

$("#editNoteForm").on("submit",function(e) { var data = {title:$("#noteTitle").val(), body:$("#noteBody").val(), id:$("#noteId").val() }; saveNote(data,function() { $.mobile.changePage("index.html",{reverse:true}); }); e.preventDefault(); });

---

Jamais je n'arrive à faire fonctionner ce code.
Pour moi, c'est normal, car ce code est chargé au chargement d'index.html, et que jquery ne trouve pas #editNoteForm forcement car il est présent dans le DOM de la page edit.html...

J'ai également testé :

Code:

---

1 2 3

$("#editPage").on("pageshow", function() { alert('ok'); }

---

mais idem... Avez vous une idée du problème ?
Est il possible de déclarer des méthode jquery sur des éléments DOM non présents au démarrage ?

Oui, en utilisant la délégation d'événement.

Merci Bovino ;)

C'est bien ce que j'avais compris mais cela ne marche pas.

Voici la page chargée quand on clique sur un lien d'index.html

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div data-role="page" id="editPage" data-theme="a"> <div data-role="header"> <h1>Ajouter</h1> </div> <div data-role="content"> <form id="editNoteForm" method="post"> <input type="hidden" name="noteId" id="noteId" value=""> <div data-role="fieldcontain"> <label for="noteTitle">Titre</label> <input type="text" name="noteTitle" id="noteTitle"> </div> <div data-role="fieldcontain"> <label for="noteBody">Observation</label> <textarea name="noteBody" id="noteBody"></textarea> </div> <div data-role="fieldcontain"> <input type="button" id="addObs" value="Sauvegarder"> </div> </form> </div> <div data-role="footer" class="ui-bar"> <a href="index.html" data-role="button" data-icon="home">Accueil</a> </div> </div>

---

Et le code js chargé avec index.html

Code:

---

1 2 3

$("#addObs").on("click",function(e) { alert('ok'); });

---

Et au click, rien ne ce passe.

Bonjour

Vous n'avez pas bien compris le principe : $( "sélecteur parent non dynamique" ).on( "click", "sélecteur enfant dynamique ou non", function(){ ... });.

Rah quel idiot, j'avais mal lu la doc !

Code:

---

1 2 3 4 5 6

$(document).on("submit", "#editNoteForm", function(e) {   alert('ok');   });

---

Nickel, ça marche :D

Merci beaucoup !