jQuery Mobile et modification du DOM
Bonjour,
Je suis en train de tester jQuery Mobile. J'ai une liste déroulante classique :
Code:
1
2
3
4
5
| <select id="categories" name="categories">
<option value="58">Auto</option>
<option value="23">Moto</option>
<option value="73">Vélo</option>
</select> |
Quand je sélectionne une option, je charge (appel Ajax) une liste d'éléments, que j'ajoute dans le DOM :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $.ajax({
type: "POST"
, url: 'ajax/categories.php'
, data: id // = l'id de la catégorie sélectionnée
, dataType: "json"
, success: function(response) {
// Ajout des éléments dans <div id="item_list">
$('#item_list').append('<ul class="ui-listview" data-role="listview"></ul>');
items = [];
$.each(response.items, function(i, item) {
id = item.id;
titre = item.titre;
items.push('<li class="item" id="item_'+ id +'"><a class="item ui-btn ui-btn-icon-right ui-icon-carat-r" href="#"><h2>'+ titre +'</h2></a></li>');
}); // close each()
$('ul.ui-listview').append( items.join('') );
$('#item_list').trigger('refresh'); // cette ligne pose problème
}
, error: function() {
// $('span.error_message').html("Erreur"); // TODO
}
}); |
La liste des items s'affiche bien comme prévu. Sauf que je souhaite ajouter sur chaque élément un événement 'click', mais je n'y arrive pas.
J'ai consulté la doc, section "Enhancing new markup". J'ai ajouté le $('#item_list').trigger('refresh'); (aussi essayé 'create') qui, pour ce que j'ai compris, est censé "actualiser" mon DOM pour que je puisse utiliser les nouveaux éléments ajoutés. Mais cela ne fonctionne pas, je ne dois pas faire comme il faut.
Une idée pour y arriver ?
Merci pour votre aide.
Edit : j'ai finalement trouvé, avec la propriété on de jQuery.
