Bonjour,

Je suis en train de tester jQuery Mobile. J'ai une liste déroulante classique :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
$.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.