JQuery와 : 경고 제대로 작동하지

Question

내가 그러나이

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

같은 JQuery와 통해 대화 상자를 가지고, 내가 그것을 테스트 할 때 경고 메시지가 뭔가를 반환 "65undefined"와 "undefinedDavid L. Kirp" "65David L. Kirp"가 아니라 두 변수가 모두 초기화되고 있음을 나타냅니다. 이 문제를 어떻게 해결할 수 있습니까? $(this).closest('input[name=instructor]:checked') 당신에게 확인 라디오를 제공하지만 $(this).closest('input[name=common_name]:checked')가 common_name 라디오 instructor의 조상이되지 않기 때문에 요소를 찾기 위해 실패합니다 - 당신이 instructor를 변경하는 경우 것이 때문에

Answer 1

오류는 귀하의 경우 완벽하게 합리적이다. 당신이 common_name를 선택하면

$('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); 
}); 

(당신이 두 값 세트에서 값을 선택할 때까지이 여전히 필드 중 하나에 정의되지 않은 줄 수) 강사 undefined

시도를 줄 것이다, 또한 다른 방법으로 일어날 수있다

데모 : Fiddle