jquery append() qui ne travaille pas à l'ajouter dynamiquement des éléments

Considérer le HTML

<ul>
    <li>Default item</li>
    <li>Default item</li>
</ul>
<button>Append</button>

et le jQuery, le code

$('button').live('click', function(){  //This action is done by an external script.
    $('ul').append('<li>Added item</li>'); 
});

$('ul li').append('<b> x</b>'); //This action is done by me

Le truc, c'est que j'ai besoin d'ajouter le "x" pour tous les nouveaux éléments ajoutés à la dom.

Dans ce cas, seul défaut, les éléments sont ajoutés avec le "x".

Nouvellement ajouté des éléments ne sont pas annexés par "x".

Je suis sûr que le travail sera simple, mais ne peux pas l'obtenir droite!!!!

Exemple vivant - http://jsfiddle.net/vaakash/LxJ6f/1/

InformationsquelleAutor Aakash Chakravarthy | 2011-12-04
  1. 7

    Votre code est en cours d'exécution tout de suite, et donc, bien sûr, il n'a accès qu'aux éléments qui existent déjà. Le code de l'ajout de nouveaux éléments de la liste est en cours d'exécution plus tard, lorsque l'utilisateur clique sur quelque chose. Vous aurez à accrocher dans ce processus en tant que bien.

    Une façon est d'accrocher le même cas qu'ils sont, et exécuter votre code du gestionnaire d'événement. Assurez-vous de raccorder l'événement après ils ne.

    Leur code:

    $('button').live('click', function(){
    $('ul').append('<li>Added item</li>');
});

    Votre code (après eux):

    $('button').live('click', markButtons);

markButtons();

function markButtons() {
    $('ul li:not(.marked)')
        .addClass("marked")
        .append('<b> x</b>');
}

    Mis à jour le violon

    La raison je l'ai dit, votre code doit faire de son raccordement à l' après leur code, c'est que jQuery garantit l'ordre des appels à des gestionnaires d'événement: Lorsque l'événement se produit, les gestionnaires sont appelés dans l'ordre dans lequel ils sont attachés. En joignant votre gestionnaire après qu'ils attachent leur, vous garantir que votre gestionnaire est appelé après leurs a fait sa chose.

    Si vous êtes inquiet au sujet de l'ordre de se mêler, vous pouvez toujours retarder votre code légèrement:

    $('button').live('click', function() {
    setTimeout(markButtons, 0);
});

    De cette façon, votre code est garanti à courir après tous les gestionnaires d'événements reliés à la click ont été exécutés.

    • oui, c'est ma quesion ! comment relier cet événement ??
    • Je pense que j'étais à ajouter que, comme vous étiez en train de lire. 🙂
    InformationsquelleAutor T.J. Crowder
  2. 2

    Vous devez répéter le "x" de code dans le gestionnaire d'événement:

    $('button').live('click', function(){  //This action is done by an external script.
    $('ul').append(
      $('<li>Added item</li>').append('<b>x</b>')
    ); 
});

    Bien sûr, vous pourriez tout aussi bien mettre le gras "x" à droite dans la <li> lorsque vous ajouter ...

    modifier Si vous ne pouvez pas changer le gestionnaire de clic, alors la seule chose que vous pouvez faire est soit de sondage les DOM, ou bien les essayer quelque chose comme ce que @T. J. Crowder suggère (qui je pense devrait fonctionner très bien).

    • mais l'action "clic" n'est pas fait de mon moi, c'est fait par un script externe qui je ne peut pas modifier. juste j'ai besoin d'ajouter le "x" pour tous les nouveaux ajouté des éléments..
    • OK je vais modifier la réponse avec ce que je pense être la seule façon de le faire.
    InformationsquelleAutor Pointy
  3. 1

    Pourquoi ne pas simplement le faire dans les premières ajouter?

    $('button').live('click', function(){  //This action is done by an external script.
    $('ul').append('<li>Added item<b> x</b></li>'); 
});

    Puisqu'il semble que vous n'avez pas accès à ce script qui est en train de faire de l'ajouter, vous pouvez lier votre propre gestionnaire.

    $('button').live('click', function(){  //This action is done by an external script.
    setTimeout(function() {
        $('ul li:not(li:has(b))').append('<b> x</b>'); 
    }, 10);
});

    Cela permet de sélectionner li éléments qui n'ont actuellement pas de imbriquée b élément, et il va ajouter un.

    Je l'ai placé dans un setTimeout puisque vous ne pouvez pas être en mesure de garantir l'ordre d'exécution des gestionnaires d'.

    Si vous préférez valide les sélecteurs CSS, faire ceci à la place:

    $('ul li').not($('li b').closest('li')).append('<b> x</b>');

    ou ceci:

    $('ul li').not(function() { return $(this).find('b').length; }).append('<b> x</b>');

    JSFIDDLE DÉMO montrant les deux gestionnaires distinct.

    • en fait, un autre script (je ne suis pas l'auteur) ajoute l'élément de la liste. Mon travail consiste à ajouter l'option "x" marque ..
    • Je vais mettre à jour.
    • merci d'essayer, mais je ne peux pas changer le "cliquez sur" bloquer.. (mentionnées dans le commentaire) donc je ne peux pas ajouter le "settimeout" à l'intérieur de la cliquez sur le bloc !!
    • Comme ma réponse dit, vous liez votre propre. Ce n'est pas la modification de l'original. C'est la liaison d'un nouveau distinct, en plus de l'original.
    • href="http://jsfiddle.net/xQhsP/" >Voici un exemple qui montre que les deux gestionnaires.
    InformationsquelleAutor RightSaidFred