2009-04-22 18 views
18

"ten" jest polem tekstowym, "nowy_id" jest liczbą całkowitą.Ustaw nowy identyfikator za pomocą jQuery

Kiedy stosuje się następujący fragment:

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

zmiany id, nazwa zmienia też, ale nie wartości. Jeśli zmienię ostatnią linię na tę (i w związku z tym używam literału ciągu znaków):

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

to działa.

Wszelkie pomysły?

- EDYTUJ - Dzięki Steerpike za szybki test wtyczek - uważam, że powinien działać, ale nie mogę znaleźć błędu.

Oto kilka Kod:

utworzyć klon korzystając

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

„klon” teraz zawiera div, który osadzony pól wejściowych.

Po wygenerowaniu nowego identyfikatora:

/** 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); 
    }); 

polach tekstowych nie mają żadnych wartości.

+0

to id jest wciąż unikalny dla dokumentu po zmianie? – fredrik

+0

tak, po zmianie to jest wyjątkowe – schneck

Odpowiedz

22

Właśnie napisałem krótki wtyczki do uruchomienia testu przy użyciu tego samego fragmentu kodu i działa prawidłowo

$.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> 

Mogę więc tylko założyć, że coś innego dzieje się w twoim kodzie. Czy możesz podać więcej szczegółów?

+1

Miałeś rację, po pół nocy debugowania okazało się, że nie jest dobrze mieszać edycję .html() z bezpośrednią manipulacją węzłem ... w każdym razie twój kod doprowadził mnie do rozwiązania, wielkie dzięki. – schneck

0

EDYTOWANIE: na podstawie Twojego komentarza i przy założeniu, że this jest elementem, który jest sklonowany.

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

Pełna Przykład

<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

Niestety, to nie działa tak dobrze. – schneck

+0

@StStamper: Tak, zrozumiałem, ale to nie działa. @tvanfosson: Zmiana wartości przed id nie działa tutaj, ponieważ element formularza jest klonem innego elementu, więc najpierw musi uzyskać unikalny identyfikator. – schneck

+0

@schneck - zaktualizowałem swoją odpowiedź w odniesieniu do klonowania elementu. – tvanfosson

1

Próbowałaś

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

zamiast

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

val() jest zazwyczaj łatwiejsze, gdyż atrybut, który należy zmienić, może być inny w różnych elementach DOM.

0

Co się dzieje, kiedy ustawić wszystkie atrybuty w jednym attr() command jak tak

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

Użyj .val() nie attr('value').

Powiązane problemy