ejemplo - jquery text

jquery clonando problema html, actualiza DOM?

Question

Necesito ayuda de los expertos de javascript / jquery para resolver el siguiente problema:

---- 1. este javascript alerta la identificación de una opción seleccionada en una etiqueta de selección html:

$(function(){
$("#id_productos_list").change(
function(){
var op = $(this).selectedValues()
alert(op);
}
);
});

---- 2. este código javascript clone html:

function cloneMore(selector, type) {
var newElement = $(selector).clone();
var total = $(''#id_'' + type + ''-TOTAL_FORMS'').val();
newElement.find('':input'').each(function() {
var name = $(this).attr(''name'').replace(''-'' + (total-1) + ''-'',''-'' + total + ''-'');
var id = ''id_'' + name;
$(this).attr({''name'': name, ''id'': id}).val('''').removeAttr(''checked'');
});
newElement.find(''label'').each(function() {
var newFor = $(this).attr(''for'').replace(''-'' + (total-1) + ''-'',''-'' + total + ''-'');
$(this).attr(''for'', newFor);
});
total++;
$(''#id_'' + type + ''-TOTAL_FORMS'').val(total);
$(selector).after(newElement);
}

---- esto es una parte del código HTML que JS está clonando, y funciona sin problemas

 <select id="id_productos_list" name="productos_list" >
<option value="1">One</option>
<option value="2">Two</option>
</select>

PERO solo el javascript # 1 funciona con el código html inicial (original para clonar). los otros clonados no alertan las opciones seleccionadas. Probé con diferentes atributos de id para cada etiqueta de selección clonada, sin resultados.

¿Qué me falta? firebug muestra el DOM html clonado. nice: S ¿Tengo que actualizar DOM después de la clonación para hacer $ ("# id productos list"). change (...) funciona?

Answer 1

¿Has probado .clone(true) que clona todos los manipuladores conectados? Se describe en la parte inferior de la documentación Clon .

Answer 2

La sintaxis jQuery $("#...") devolverá el primer elemento coincidente por identificación exacta. Si está clonando elementos pero no diferenciándolos por su id, este código no funcionará como esperaba.

Puede comparar las diferencias entre las dos expresiones siguientes:

alert($("#id_productos_list").size());

...y

alert($("[id=''#id_productos_list'']").size());

La primera expresión devolverá cero o uno dependiendo de la presencia de un elemento con id "id_productos_list" en su página. El primer elemento en orden declarado gana.

La segunda expresión devolverá cero o uno o más dependiendo del conjunto de todos los elementos con id "id_productos_list" en su página.

También es importante tener en cuenta que no parece que los controladores de eventos se copien como parte de la operación de clone() . Es posible que deba reasignar estos manejadores a los nuevos elementos.

var newElement = $(selector).clone(true);