jQuery.val() nie działa na znaczniku <input>

Question

Po wpisaniu czegoś w danych wejściowych i kliknięciu przycisku ".val()" zwraca pustą wartość, każdy pomysł dlaczego?

kod HTML:

<div class="mainClass"> 
    <div class="class1" > 
     <div class="class2"> 
     <h3>Settings 1</h3> 
     <label> 
      <span>Text 1:</span> 
      <input type="text" name="text"> 
     </label> 
     <label> 
      <span>Text 2:</span> 
      <input type="text" name="text2"> 
     </label> 
     </div> 
    </div> 

    <div class="class3" > 
     <div class="class4"> 
     <h3>Settings 2</h3> 
     <label> 
      <span>Text 1:</span> 
      <input type="text" name="text"> 
     </label> 
     <label> 
      <span>Text 2:</span> 
      <input type="text" name="text2"> 
     </label> 
     </div> 
    </div> 
</div> 
<button id="Go" class="go" >GO </button> 

kod JavaScript:

$('#Go').on('click', function() { 
    alert($('.class1 input').val()); //return an empty value 
    $('.class1 input').val("test"); 
    alert($('.class1 input').val()); //return test 
}); 

EDIT:

Nawet tego nie robi praca, a tu mam tylko jedno wejście, więc nie mogę wpisać w źle:

<div class="mainClass"> 
    <div class="class1" > 
     <div class="class2"> 
     <h3>Settings 1</h3> 
     <label> 
      <span>Text 1:</span> 
      <input type="text" name="text"> 
     </label>   
     </div> 
    </div> 
</div> 
<button id="Go" class="go" >GO </button> 

EDIT 2: Znalazłem początek problemu ...

Kiedy robię, że:

$('.class1 input').each(function() { 
    alert($(this).attr('name') + " value:" +$(this).val()); 
}); 

mam dwa "wpis" tak:

text value: 
text value:myinputText  

Więc dwa utworzony na przykład w moim kodzie HTML, pierwszy jest pusty, a drugi działa dobrze! Przyglądając się uważnie mojej stronie, stwierdziłem, że wszystkie elementy są zduplikowane (<select,field, input...)

Każdy pomysł, jak to możliwe? Czy dzwonię dwa razy do mojego pliku html? I cały mój kod jest w okienko (nie wiem, czy to może pomóc) (jestem nowy w JavaScript i jQuery)

Dzięki

Answer 1

Jest więcej niż jeden element dopasowania '.class1 input'. Prawdopodobnie nie wypełniłeś pierwszego z zestawu.

Od the documentation:

Pobierz aktualną wartość pierwszego elementu w zbiorze dopasowanych elementów.

Podczas val('text') wypełnia wszystkie elementy pasujące:

Ustaw wartość każdego elementu w zestawie dopasowanych elementów

Dlatego widzisz coś w swoim drugim alertu.

Lepiej użyj bardziej selektywnego selektora. Zwykle używamy identyfikatora lub nazwy, jeśli formularz służy do wysyłania wartości do serwera.

Answer 2

Masz więcej niż jeden element, który pasuje.

Z jQuery docs

.val()

Pobierz aktualną wartość pierwszego elementu w zbiorze dopasowanych elementów lub ustawić wartość każdego dopasowanego elementu.

Dostajesz pierwszy element dopasowanego zestawu jako stan dokumentacji. Jeśli chcesz wszystkie wartości, musisz zapętlić zestaw.

Answer 3

$('.class1 input').val() 

odnosi się do dwóch elementów

<input type="text" name="text"> 

i

<input type="text" name="text2"> 

Answer 4

Owiń kod jQuery wokół Dokument gotowy bloku:

$('document').ready(function(){}); 

jak s o:

$('document').ready(function(){ 
    $('#Go').on('click', function() { 
     alert($('.class1 input').val()); //return an empty value 
     $('.class1 input').val("test"); 
     alert($('.class1 input').val()); //return test 
    }); 
}); 

Nawet przy tak dużej pomocy z wyszukiwarki Google i Stackoverflow, zajęło nam 1 godzinę, aby zidentyfikować ten problem.