Comment maintenir un événement Javascript correct après avoir utilisé cloneNode (true)

Question

J'ai un élément de formulaire qui contient plusieurs lignes d'entrées.Considérez chaque ligne comme les attributs d'un nouvel objet que je souhaite créer dans mon application Web.Et je veux pouvoir créer plusieurs nouveaux objets dans un seul HTTP POST.J'utilise la méthode cloneNode(true) intégrée de Javascript pour cloner chaque ligne.Le problème est que chaque ligne d'entrée a également un lien de suppression attaché à son événement onclick :

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

Lorsque vous cliquez sur le lien de suppression de la ligne d'entrée clonée, toutes les lignes d'entrée qui ont été clonées à partir du même objet dom sont également supprimées.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 mettez pas de gestionnaire sur chaque lien (cela devrait vraiment être un bouton, BTW).Utiliser événement bouillonnant gérer tous boutons avec un seul 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

Vous pouvez essayer de cloner en utilisant la méthode innerHTML, ou une combinaison :

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

Aussi:Je pense que cloneNode ne clone pas les événements enregistrés auprès de addEventListener.Mais les événements attachEvent d'IE sont cloné.Mais je peux me tromper.

Answer 3

J'ai testé cela dans IE7 et FF3 et cela a fonctionné comme prévu - il doit se passer autre chose.

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 4

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

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

dans une fonction :

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

Cela vous permettra de savoir ce que $(this) renvoie.S'il renvoie effectivement plus d'un objet (plusieurs lignes), alors vous savez certainement où chercher - dans le code qui crée l'élément à l'aide de cloneNode.Effectuez-vous des modifications de l'élément résultant (c'est-à-direchanger l'attribut id) ?

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

Answer 5

La première réponse est la bonne.

Pornel suggère implicitement la solution la plus indépendante des navigateurs et des frameworks.

Je ne l'ai pas testé, mais le concept fonctionnera dans ces situations dynamiques impliquant des événements.

Answer 6

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

MODIFIER:Oups, je vois que vous utilisez Prototype.