Discussion :

[LaurentC33]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Bovino]

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

[LaurentC33]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et au click, rien ne ce passe.

[danielhagnoul]

Bonjour

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

[LaurentC33]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
   $(document).on("submit", "#editNoteForm", function(e) {
 
        alert('ok');
 
    });

Nickel, ça marche

Merci beaucoup !