Comment gérer l'événement Javascript correct après l'utilisation de cloneNode (true)

Question

J'ai un élément de formulaire qui contient plusieurs lignes d'entrées. Pensez à chaque ligne en tant qu'attributs d'un nouvel objet que je veux créer dans mon application Web. Et, je veux être capable de créer plusieurs nouveaux objets dans un HTTP POST. J'utilise la méthode cloneNode (true) de Javascript pour cloner chaque ligne. Le problème est que chaque ligne d'entrée a également un lien de suppression attaché à son onclick événement:

// prototype based 
<div class="input-line"> 
    <input .../> 
    <a href="#" onclick="$(this).up().remove();"> Remove </a> 
</div> 

Lorsque le lien de suppression de clonage entrée ligne est cliqué, il supprime également toutes les lignes d'entrée qui ont été clonés à partir de la même objet dom. Est-il possible de relier l'objet "this" à la balise d'ancrage appropriée après avoir utilisé cloneNode (true) sur l'élément DOM ci-dessus?

Answer 1

Ne pas mettre le gestionnaire sur chaque lien (ce devrait vraiment être un bouton, BTW). Utilisez event bubbling pour gérer tous boutons avec un gestionnaire:

formObject.onclick = function(e) 
{ 
    e=e||event; // IE sucks 
    var target = e.target||e.srcElement; // and sucks again 

    // target is the element that has been clicked 
    if (target && target.className=='remove') 
    { 
     target.parentNode.parentNode.removeChild(target.parentNode); 
     return false; // stop event from bubbling elsewhere 
    } 
} 

+

<div> 
    <input…> 
    <button type=button class=remove>Remove without JS handler!</button> 
</div> 

Answer 2

On dirait que vous utilisez jQuery? Il a une méthode pour cloner un élément avec des événements: http://docs.jquery.com/Manipulation/clone#true

EDIT: Oups, je vois que vous utilisez Prototype.

Answer 3

Vous pouvez essayer le clonage en utilisant la méthode innerHTML, ou un mélange:

var newItem = $(item).cloneNode(false); 
newItem.innerHTML = $(item).innerHTML; 

aussi: Je pense que cloneNode ne clone pas les événements, enregistrés avec addEventListener. Mais les événements attachEvent d'IE sont clonés. Mais j'ai peut-être tort.

Answer 4

J'ai testé cela dans IE7 et FF3 et cela a fonctionné comme prévu - il doit y avoir quelque chose d'autre qui se passe.

Voici mon script de test:

<div id="x"> 
    <div class="input-line" id="y"> 
     <input type="text"> 
     <a href="#" onclick="$(this).up().remove();"> Remove </a> 
    </div> 
</div> 

<script> 

$('x').appendChild($('y').cloneNode(true)); 
$('x').appendChild($('y').cloneNode(true)); 
$('x').appendChild($('y').cloneNode(true)); 

</script> 

Answer 5

Pour déboguer ce problème, j'enveloppez votre code

$(this).up().remove()

en fonction:

function _debugRemoveInputLine(this) { 
    debugger; 
    $(this).up().remove(); 
}

Cela vous permettra de trouver sur ce que retourne $ (this). S'il retourne effectivement plus d'un objet (plusieurs lignes), alors vous savez exactement où chercher - dans le code qui crée l'élément en utilisant cloneNode. Effectuez-vous une modification de l'élément résultant (c'est-à-dire en changeant l'attribut id)?

Si j'avais le problème que vous décrivez, je considérerais d'ajouter des identifiants uniques à l'élément déclencheur et à l'élément "ligne".

Answer 6

La première réponse est la bonne.

Pornel suggère implicitement la solution agnostique la plus cross-navigateur et le framework.

N'a pas testé, mais le concept fonctionnera dans ces situations dynamiques impliquant des événements.