Cómo Mantener la Correcta Eventos de Javascript Después de Usar cloneNode(true)

Question

Tengo un elemento de formulario que contiene varias líneas de entradas.Pensar de cada línea como atributos de un objeto nuevo que quiero crear en mi aplicación web.Y, quiero ser capaz de crear múltiples objetos en un POST de HTTP.Estoy usando Javascript cloneNode(true) método para clonar cada línea.El problema es que cada entrada de la línea también tiene un enlace de eliminación de adjunta a su evento onclick:

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

Cuando el clonado de entrada de línea de la eliminación se hace clic en enlace, también se elimina cualquier entrada de las líneas que fueron clonados a partir de un mismo objeto dom.Es posible volver a enlazar el "este" objeto para el anclaje adecuado de la etiqueta después de usar cloneNode(true) en el anterior elemento de DOM?

Answer 1

No ponga el controlador en cada enlace (esto realmente debe ser un botón, por CIERTO).Uso la propagación de los eventos para manejar todos botones con un controlador:

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

Usted podría intentar la clonación utilizando el método de innerHTML, o una mezcla de:

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

También:Creo que cloneNode no clon de eventos, registrado con addEventListener.Pero IE attachEvent eventos son clonado.Pero yo podría estar equivocado.

Answer 3

He probado en IE7 y FF3 y funcionó como se esperaba - debe haber algo más.

Aquí está mi prueba de secuencia de comandos:

<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 este problema, me gustaría ajustar el código

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

en una función:

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

Esto permitirá que usted se entere de lo $(this) está regresando.Si es de hecho el regreso de más de un objeto (varias filas), entonces usted sin duda sabe dónde buscar -- en el código que crea el elemento mediante cloneNode.Hacer cualquier modificación del elemento resultante (es decir,cambiar el atributo id)?

Si he tenido el problema que describes, me gustaría considerar la adición de Identificadores únicos para el elemento propulsor y la "línea" del elemento.

Answer 5

La primera respuesta es la correcta.

Pornel es, implícitamente, lo que sugiere la mayoría de cross-browser y marco agnóstico solución.

No lo he probado, pero el concepto de trabajo en estas situaciones dinámicas que involucran eventos.

Answer 6

Parece que estás usando jQuery?Tiene un método para clonar un elemento con eventos: http://docs.jquery.com/Manipulation/clone#true

EDITAR:Uy veo que estás usando Prototype.