양식을 유효성 검증하는 백그라운드에서 ajax 호출을 수행 할 때 Click 이벤트가 발생하지 않음 (또는 무시 됨)

오브젝트 "이름"의 유효성을 검사하여 고유한지 확인합니다. 이 작업을 수행하려면 jQuery bassisstance 유효성 검사 플러그인을 사용하고 있습니다. 나는 "이름"텍스트 필드에 이름을 입력 한 다음 바로 아래 정의 된 제출 버튼을 클릭하면양식을 유효성 검증하는 백그라운드에서 ajax 호출을 수행 할 때 Click 이벤트가 발생하지 않음 (또는 무시 됨)

jQuery.validator.addMethod("new_user_role_name_unique", function(value) { 
    var role_name_valid = true; 
    jQuery.ajax(
    { 
     type: "GET", 
     async: false, 
     data: "name=" + encodeURIComponent(value), 
     url: '/user_roles/0/name_taken', 
     success: function (result) { 
      var taken = JSON.parse(result); 
      role_name_valid = !taken 
     } 
    }); 
    return role_name_valid; 
}, I18n.t('user_role_name_already_used'));

을 다음과 같이 내가 방법을 기대, 고유성 varify하는 검증 방법 중 동기 아약스 호출을 발행

 <button id='user_role_add_button' class='rounded green' type='button' onclick="addUserRole()" name='add' value='add'> 
     <span><%= t(:user_role_add_button) %></span> 
     </button>

그러나 addUserRole 메서드는 호출되지 않습니다. 그러나 "이름"을 입력 한 다음 이름 텍스트 필드에 집중하지 않으면 버튼을 클릭하기 전에 메서드가 드라마없이 호출됩니다.

그래서 내 문제는 이름 텍스트 필드에 포커스가있을 때 addUserRole 메서드가 호출되도록 저장 단추를 두 번 클릭해야한다는 것입니다.

내 클릭 이벤트가 이러한 상황에서 첫 번째 클릭에서 손실 된 것으로 보이는 이유를 알고 있습니까? 나는 사용자가 버튼을 두 번 클릭하여 저장할 수 없습니다.

출처

2011-08-31 James

'async : false, '문제가 있습니다 – Rafay

동기식 아약스는 UI 이벤트를 차단하고이를 수행 할 때 일부 이벤트가 손실 될 수 있습니다. 비동기식 Ajax 호출을 사용하고 사용자 이벤트를 실시간으로 처리하는 것이 훨씬 더 좋습니다.

페이지의 관련 HTML 및 모든 참여 이벤트 처리기가 없으면 더 많은 정보를 제공하기 위해 설명하는 순서를 따르기가 어렵습니다.

출처

2011-08-31 03:01:27 jfriend00

고맙습니다. 클릭 이벤트가 사라지는 이유에 대한 질문에 대답했습니다. 유일한 문제는 ajax 호출이 고유성 유효성 검사를 해결한다는 것입니다. 비동기를 true로 설정하면 부정확 한 유효성 검사 결과가 반환 될 수 있습니다. – James

ajax 호출을 async로 만들면 부정확 한 결과가 반환되지 않습니다. ajax 호출은 같은 결과를 반환합니다. 비동기 호출을 사용하기 위해 코드를 약간 재구성해야하지만 훨씬 더 나은 사용자 경험이 있습니다. – jfriend00

양식을 유효성 검증하는 백그라운드에서 ajax 호출을 수행 할 때 Click 이벤트가 발생하지 않음 (또는 무시 됨)

답변

관련 문제