2009-04-22 18 views
18

"this" es un campo de texto, "new_id" es un número entero.Establecer nueva identificación con jQuery

Cuando aplico el siguiente fragmento:

$(this).attr('id', this.id + '_' + new_id); 
$(this).attr('name', this.name + '_' + new_id); 
$(this).attr('value', 'test'); 

los cambios de identificación, el nombre cambia también, pero no el valor. Si cambio la última línea a esto (y por lo tanto uso una cadena literal)

$('#mytextfield_3').attr('value', 'test'); 

funciona.

¿Alguna idea?

- EDIT - Gracias a Steerpike por la prueba de complemento rápido, creo que debería funcionar, pero no puedo encontrar el error.

Aquí hay algo más de código:

puedo crear el clon usando

clone = $(this).find('.clone_fields_container:first').clone(); 

"clon" ahora contiene un div que se ha incrustado campos de entrada.

Después de generar un nuevo id:

/** Iterate over input and select fields in container */ 

    clone.children('input,select,textarea').each(function() { 
    $(this).attr('id', this.id + '_' + new_id); 
    $(this).attr('name', this.name + '_' + new_id); 
    $(this).val('test'); 
    console.log(this); 
    }); 

Los campos de texto no tienen ningún valor.

+0

¿La identificación sigue siendo única para el documento después de haberlo cambiado? – fredrik

+0

sí, después de que lo cambié, es único – schneck

Respuesta

22

que acabo de escribir un plugin rápida para ejecutar una prueba utilizando el mismo fragmento y funciona bien

$.fn.test = function() { 
     return this.each(function(){ 
     var new_id = 5; 
     $(this).attr('id', this.id + '_' + new_id); 
     $(this).attr('name', this.name + '_' + new_id); 
     $(this).attr('value', 'test'); 
     }); 
    }; 

$(document).ready(function() { 
    $('#field_id').test() 
}); 

<body> 
    <div id="container"> 

    <input type="text" name="field_name" id="field_id" value="meh" /> 
    </div> 
</body> 

Así que solo puedo presumir que algo más está sucediendo en tu código. ¿Puedes darnos más detalles?

+1

Tenías razón, después de la mitad de una noche de depuración encontré que no es bueno mezclar .html() edición con manipulación directa de nodos ... de todos modos, tu código me trajo a la solución, muchas gracias. – schneck

0

EDIT: en función de su comentario y suponiendo que this es el elemento clonado.

$(this).clone() 
     .attr('id', this.id + '_' + new_id) 
     .attr('name', this.name + '_' + new_id) 
     .val('test') 
     .appendTo('#someElement'); 

Ejemplo completo

<script type="text/javascript"> 
    var new_id = 0; 
    $(document).ready(function() { 
     $('#container > input[type=button]').click(function() { 
      var oldinp = $('input#inp')[0]; 
      var newinp = $(oldinp).clone() 
            .attr('id',oldinp.id + new_id) 
            .attr('name',oldinp.name + new_id) 
            .val('test') 
            .appendTo($('#container')); 
      $('#container').append('<br>'); 
      new_id++; 
     }); 
    }); 
</script> 


<div id="container"> 
<input type="button" value="Clone" /><br/> 
<input id="inp" name="inp" type="text" value="hmmm" /><br/> 
</div> 
+0

Desafortunadamente, eso no funciona tan bien. – schneck

+0

@TStamper: sí, lo entendí, pero esto no funciona. @tvanfosson: Cambiar el valor antes de que el ID no funcione aquí, porque el elemento del formulario es un clon de otro elemento, por lo que primero debe obtener un ID único. – schneck

+0

@schneck - He actualizado mi respuesta con respecto a la clonación de un elemento. – tvanfosson

1

¿Usted intentó

$(this).val('test'); 

en lugar de

$(this).attr('value', 'test'); 

val() es generalmente más fácil, ya el atributo que necesita cambiar puede ser diferente en diferentes elementos DOM.

0

¿Qué ocurre cuando se configura todos los atributos en una attr() command al igual que

$(this).attr({ 
       id : this.id + '_' + new_id, 
       name: this.name + '_' + new_id, 
       value: 'test' 
      }); 
0

Utilice .val() no attr('value').

Cuestiones relacionadas