JQuery Déléguer et utiliser plusieurs options dans la fonction

Question

Je n'arrive pas à trouver comment utiliser la fonction de délégué JQuery pour faire ce dont j'ai besoin. Fondamentalement, j'ai besoin de permettre aux utilisateurs d'ajouter dynamiquement des panneaux (c'est-à-dire des divs) à un formulaire en sélectionnant un bouton. Ensuite, quand un utilisateur clique sur un bouton dans un panneau donné, je veux être en mesure de quelque chose à ce panneau (comme changer la couleur dans cet exemple). Malheureusement, il semble que les références aux fonctions de déplacement JQuery ne fonctionnent pas dans cette instance. Quelqu'un peut-il expliquer comment obtenir cet effet? Est-il de toute façon de lier un délégué différent à chaque panneau que son ajouté.

$('.addPanels').delegate('*', 'click', function() { 
    $(this).parent.css('background-color', 'black'); 
    $('.placeholder').append('<div class="panel"><a href="#" class="addLink">Add item</a></div>'); 
}); 

<div class="addPanels"> 
    <div class="panel"> 
     <a href="#" class="addLink">Add item</a> text</div> 
     <div class="placeholder"/> 
    </div> 
</div> 

Answer 1

parent est une méthode, pas une propriété; il doit donc être appelé (parent())

Le premier paramètre de la méthode delegate est le sélecteur; donc vous capturez un événement de clic sur n'importe quel élément dans .addPanels.

$('.addPanels').delegate('.addLink', 'click', function(event) { 
    var panel = $(this).closest('div.panel'); 

    panel.css('background-color', 'black'); 
    panel.find('.placeholder:first').append('Add item'); 

    event.preventDefault(); 
}); 

Serait comment je choisirais de le faire. ("closest" documentation)