JQuery: Сигнал тревоги не работает должным образом

Question

У меня есть диалоговое окно, сделанное при помощи JQuery, как этот

<div class ="editable" id="div_David L. Kirp[instructor_status]"contenteditable="1"> 
     <span class="text-error">Error: More than one user with same fname and lname</span<br/> 
      Users:<br/> 
     <span class="multiple-users"> 
       &nbsp[CLICK HERE] Instructor ID: 65, Common Name: David Kirp</span<br/> 
     <span class="multiple-users"> 
       &nbsp[CLICK HERE] Instructor ID: 17210, Common Name: David L. Kirp</span><br/><div class="update-dialog" title="Update Common Name">Which instructor do you want to update?<p><input type="radio" id="instructor_65" name="instructor" value="65"/><label for="instructor_65">   
       Instructor ID: 65, Common Name: David Kirp 
      </label></p> 
      <p><input type="radio" id="instructor_17210" name="instructor" value="17210"/> 
<label for="instructor_17210">   
      Instructor ID: 17210, Common Name: David L. Kirp 
      </label></p>Which common name do you want to assign the instructor?<p><input type="radio" id="commonName_65" name="common_name" value="David Kirp"/><label for="commonName_65"> 
      David Kirp 
      </label></p><p><input type="radio" id="commonName_17210" name="common_name" value="David L. Kirp"/><label for="commonName_17210"> 
      David L. Kirp 
      </label></p></div><button class="update-button" type="button">Update Common Name of an Instructor</button></div> 

<script> 
$("div.update-dialog").dialog({ 
       autoOpen: false, 
       dialogClass: 'dialogStyle', 
       resizable: false, 
       modal: true, 
       buttons: { 
        "Update": function() { 
        //$.load('update_common_name.php', 
         $(this).dialog("close"); 
        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 



     $('div.editable').on('click', '.update-button', function() { 
      $(".update-dialog").dialog("open"); 

     }); 

and I want it so that when I click on one of the radios, it will update the existing values to variables instructor_id and common_name (I eventually want to make an ajax request with them), like so: 

$('input:radio').change(function() {   
      instructor_id = $(this).closest('input[name=instructor]:checked').val(); 
      common_name = $(this).closest('input[name=common_name]:checked').val(); 

      // alert is for testing 
      alert(instructor_id + common_name); 
}); 
</script> 

Однако, когда я проверить это, предупредительное сообщение возвращает что-то вроде «65undefined» и «undefinedDavid Л. кирп» а не «65David L. Kirp», указывая, что не инициализируются обе переменные. Как я могу это исправить?

Answer 1

ошибка вполне разумно в вашем случае, потому что, когда вы меняете instructor - $(this).closest('input[name=instructor]:checked') дает проверяемое радио, но $(this).closest('input[name=common_name]:checked') не сможет найти элемент, поскольку common_name радио не является предком instructor. Это может произойти, другой путь также, если вы выбрали common_name инструктор даст undefined

Try (это все еще может дать неопределенными для одного из полей до выбора значений из обоих наборов значений)

$('input:radio').change(function() { 
    var instructor_id = $(this).closest('.update-dialog').find('input[name=instructor]:checked').val(); 
    var common_name = $(this).closest('.update-dialog').find('input[name=common_name]:checked').val(); 

    // alert is for testing 
    alert(instructor_id + common_name); 
}); 

Демонстрация: Fiddle