Como manter o evento Javascript correto após usar cloneNode (true)

Question

Eu tenho um elemento de formulário que contém várias linhas de entradas.Pense em cada linha como atributos de um novo objeto que desejo criar em minha aplicação web.E quero poder criar vários novos objetos em um HTTP POST.Estou usando o método cloneNode(true) integrado do Javascript para clonar cada linha.O problema é que cada linha de entrada também possui um link de remoção anexado ao seu evento onclick:

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

Quando o link de remoção da linha de entrada clonada é clicado, ele também remove quaisquer linhas de entrada que foram clonadas do mesmo objeto dom.É possível religar o objeto "this" à tag âncora adequada depois de usar cloneNode(true) no elemento DOM acima?

Answer 1

Não coloque um manipulador em cada link (isso realmente deveria ser um botão, aliás).Usar evento borbulhando lidar todos botões com um manipulador:

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

Você poderia tentar clonar usando o método innerHTML ou uma mistura:

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

Também:Acho que cloneNode não clona eventos registrados em addEventListener.Mas os eventos attachmentEvent do IE são clonado.Mas posso estar errado.

Answer 3

Testei isso no IE7 e no FF3 e funcionou conforme o esperado - deve haver algo mais acontecendo.

Aqui está meu script de teste:

<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

Para depurar esse problema, eu agruparia seu código

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

em uma função:

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

Isso permitirá que você descubra o que $(this) está retornando.Se realmente estiver retornando mais de um objeto (várias linhas), então você definitivamente sabe onde procurar - no código que cria o elemento usando cloneNode.Você faz alguma modificação no elemento resultante (ou seja,alterando o atributo id)?

Se eu tivesse o problema que você está descrevendo, consideraria adicionar IDs exclusivos ao elemento acionador e ao elemento "linha".

Answer 5

A primeira resposta é a correta.

Pornel está sugerindo implicitamente a solução mais agnóstica entre navegadores e estruturas.

Ainda não testei, mas o conceito funcionará nessas situações dinâmicas que envolvem eventos.

Answer 6

Parece que você está usando jQuery?Possui um método para clonar um elemento com eventos: http://docs.jquery.com/Manipulation/clone#true

EDITAR:Ops, vejo que você está usando o Prototype.