Ajouter <li> élément <ul> et d'ajouter cliquez sur l'événement pour chaque?

Je voudrais ajouter une série de <li> des éléments à un <ul>, et cliquez sur ajouter un événement à chacun, par programme.

Je ne suis pas sûr de la façon de le faire, du moins pas dans un cadre soigné, jQueryish façon.

C'est mon code existant:

<ul id="saved-list"></ul>
<script type="text/javascript">
$.each(all_objects, function() {{
    var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
    $('#saved-list').append(list_route);      
    //add unique id (this.id) to item and click event here?
    //pseudocode - onclick: alert(this.id);
});
$('#saved-list').refresh('listview'); //jquery mobile list refresh
</script>

Svp quelqu'un pourrait-il conseiller sur la façon d'ajouter un événement click pour chaque élément de la liste par programmation?

Mise à JOUR: j'ai besoin de faire quelque chose de légèrement différent pour chaque élément de la liste (disons une alerte) - toutes mes excuses pour ne pas faire de ce clair.

  • Il vous manque un devis sur votre ul id de l'attribut, et pas de bloc de script autour de votre script. Mauvais copier/coller?
  • merci, édité!
InformationsquelleAutor phil123 | 2011-05-24
  1. 14

    Vous êtes mieux d'utiliser .live() ou .délégué() que de s'inquiéter de la création d'un .click() gestionnaire sur chaque élément que vous créez. Quelque chose comme ceci:

    $('#saved-list').delegate('li', 'click', function () {
    //do stuff on click
});

    Vous n'avez qu'à lier, cliquez sur le port d'écoute une fois, et il va travailler pour tous les <li> qui est un descendant de l'élément avec l'ID saved-list.

    Si vous ne souhaitez créer un gestionnaire d'événements click pour chaque <li> (je ne le recommande pas, tout de même), voici une belle façon de le faire:

    $.each(all_objects, function() {
    var $a = $('<a/>', {
        href: '#saved-route',
        text: this.text
    });

    var $li = $('<li/>', {
        click: function () {
            //do stuff on click
        }
    }).append($a);

    $('#saved-list').append($li);
});
    • Désolé, je n'ai pas fait comprendre, j'ai besoin de faire quelque chose de différent pour chacun des li éléments. (Avez mis à jour qu'.)
    • Qui a l'air sympa, merci. D'intérêt, pourquoi ne pas vous recommandons de créer un gestionnaire d'événements click pour chaque élément de la liste?
    • ce n'est pas nécessairement un problème lors de l'utilisation de .live() ou .delegate(). La fonction de gestionnaire de clic peuvent se comporter différemment en fonction de l'élément qui a été cliqué.
    • Je préfère généralement utiliser .live() ou .delegate() sur .bind() (ou ses équivalents) pour essayer de garder le nombre des écouteurs d'événement à un minimum. De nombreux événements avec les auditeurs peuvent commencer à s'enlise en bas de la page, en particulier dans les navigateurs plus anciens. Voir stackoverflow.com/questions/2629803 et stackoverflow.com/questions/4782399
    • Si vous êtes à l'exécution de la même logique sur un événement en particulier (ou un ensemble d'événements) sur de nombreux éléments, c'est tout simplement un poids plus léger pour créer un seul écouteur d'événement sur certains ancêtre commun, plutôt que de créer un listener sur chaque élément de votre intéressés. En outre, avec .live() ou .delegate() sur un ancêtre commun, vous n'avez pas à vous inquiéter au sujet de re-liaison auditeurs à des éléments qui sont ajoutés. C'est une autre grande victoire, et de définitivement s'applique dans votre cas.
    InformationsquelleAutor Matt Ball
  2. 5

    Ne pas.

    Plutôt que de la liaison d'un nouveau gestionnaire d'événement pour chaque élément (qui pourrait devenir assez cher), se lier à un seul gestionnaire d'événements pour #saved-list, qui est un ancêtre commun. Remontée d'événements signifie que ancêtre éléments sont informés des événements sur leurs descendants, de sorte que vous pouvez gérer les événements de là, au lieu de sur l'origine de l'élément.

    Quelque chose comme ça...

    $.each(all_objects, function() {{
    var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
    $('#saved-list').append(list_route);      
});
$('#saved-list').delegate('li', 'click', function() {
    //do something here each time a descendant li is clicked
});

    Voir déléguer

    InformationsquelleAutor lonesomeday
  3. 4

    @Matt Balle est assez proche de la réponse ici, mais je vais ajouter un peu plus clairement que vous pouvez faire différentes choses avec le délégué, selon ce que l'élément a été cliqué:

    <ul id="saved-list"></ul>
<script type="text/javascript">
var $savedList = $("#saved-list");
$.each(all_objects, function() {
    $savedList.append("<li><a href='#saved-route'>" + this.text + "</a></li>");
});
$savedList.delegate("li", "click", function (e) {
    alert($(this).text());
});

    $('#sauvé-list').refresh('listview'); //jquery mobile le rafraîchissement de la liste

    Noter que le délégué this est toujours en se référant à la li qui a été cliqué.

    InformationsquelleAutor Mike Axiak
  4. 1

    N'est-il pas suffisant pour ajouter cet (ou après) votre boucle de courant?

    $('#saved-list li').click(function(){ alert('hello'); });

    InformationsquelleAutor Bas Slagter
  5. 1

    Vous pouvez utiliser le live fonction, la chute est que vous pourriez avoir besoin d'un mécanisme pour déterminer exactement quels li les éléments qui ont été cliqué:

    $("#saved-list li").live('click', function() {
    //act on click
});
    InformationsquelleAutor Grant Thomas
  6. 1

    bonjour phil en jquery vous pouvez créer des dom objet sans ajouter en tant que texte pour les dom.
    cela vous donnera une chans de les manipuler avant qu'ils soient ajoutés (et après).

    $("<li />")
  .append(
    $("<a />")
     .attr("href" ,"#saved-route")
     .text(this.text))
  .click(function() {
    //your click event
  })
  .appendTo("#saved-list");
    • Ce n'est pas juste, vous êtes en train d'ajouter la href attribut sur le <li> et n'avez pas créé de <a> à tous.
    InformationsquelleAutor megakorre
  7. 0
    $.each(all_objects, function() {{
    var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
    var newLi = $(list_route);
    newLi.click( function(){} ).attr("id","foo");
    //if you want the a
    newLi.find("a").click( function(){} ).attr("id","foo");

    $('#saved-list').append(newLi);              
});
    InformationsquelleAutor epascarello
  8. 0

    La .click fonction de lier une fonction de gestionnaire de clic à n'importe quel élément. Comme les commentaires dans votre code de mentionner que vous pouvez utiliser l'ID ou d'autres moyens pour sélectionner l'élément, après qu'il a été dans les DOM-isée, mais une autre façon de le faire c'est tout simplement pour faire référence à la variable qui contient l'élément que vous voulez lier.

    Exemple:

    var li = $('<li />');
li.click(function() { ... });

    C'est sans doute un peu de style, mais une des caractéristiques de jQuery, c'est qu'il est chainable. Cela signifie que les appels de fonction jQuery toujours renvoyer une référence à l'ensemble de fractionnement de jQuery lui-même. À l'aide de la chainable, vous pouvez ré-écrire le code ci-dessus comme suit:

    var list = $('#saved-list'); $.each(all_objects, function(i, item) {{
    list.append(
        $('<li />')
            .append(
                $('<a />').text(item.text)
            )
            .click(function() { ... } );
    );
});
    InformationsquelleAutor T. Stone
  9. 0

    Bien que je ne sais pas ce que cela $('#saved-list').refresh('listview') entreprise, les éléments suivants pourraient être ce que vous cherchez:

    var listItemEls = all_objects.map(function () {
    return $('<li id="' + this.id + '"><a href="#saved-route">' + this.text + '</a></li>')
           .click(function (e) {
               //do whatever here
           })
           .get();
});

$('#saved-list').append(listItemEls);

    Noter que nous évitez d'ajouter les DOM jusqu'à la dernière minute, parce que l'ajout est cher.

    Que d'autres affiches de la mention, à l'aide d'un délégué cliquez sur gestionnaire est une meilleure approche, en général. Qui ressemblerait à quelque chose comme

    var listItemEls = all_objects.map(function () {
    return $('<li id="' + this.id + '"><a href="#saved-route">' + this.text + '</a></li>')
           .get();
});

$('#saved-list').append(listItemEls)
                .delegate("li", "click", function (e) {
                    //do stuff here.
                });
    InformationsquelleAutor Domenic
  10. 0

    C'est pourquoi bind existe.

    $.each(all_objects, function(index) {{
    $("#saved-list").append("<li id='item" + index + "'><a href='#saved-route'>" + this.text + "</a></li>");
    $("#saved-list li").bind("click", function() {
        alert("Clicked on " + this.id);
    });
});

    Aussi, de cette façon est très facile de créer des clics pour chaque élément:

    $("#saved-list li#item1").bind(...)
$("#saved-list li#item2").bind(...)
$("#saved-list li#item3").bind(...)
    • .bind('click', ...) est la même chose que .click(...).
    • Oui. Et quel est le problème?
    • Pas de problème, il suffit de pointer depuis .click() est plus concis.
    • Oh, ok. Nice pointu.
    InformationsquelleAutor Erick Petrucelli