在后台执行验证表单的 ajax 调用时，不会触发（或忽略）单击事件答案

【问题标题】：Click Event is not fired (or ignored) when performing an ajax call in the background that validates a form在后台执行验证表单的 ajax 调用时，不会触发（或忽略）单击事件
【发布时间】：2011-08-31 01:37:32
【问题描述】：

我正在验证对象“名称”以确保它是唯一的。为此，我使用了 jQuery bassisstance 验证插件。我在验证方法期间发出 SYNCHRONOUS ajax 调用来验证唯一性，如下所示

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'));

当我在“名称”文本字段中输入名称，然后立即单击下面定义的提交按钮时，我希望方法 addUserRole 会被调用：

      <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 方法。

有谁知道为什么在这种情况下我的点击事件似乎在第一次点击时丢失了，而第二次则没有？我不能让用户双击按钮来保存。

【问题讨论】：

async:false,有问题

标签： javascript jquery ajax validation jquery-events

【解决方案1】：

同步 ajax 调用会阻止 UI 事件，这样做时您可能会丢失一些事件。使用异步 ajax 调用并让用户事件实时发生会更好。

如果没有来自您页面的实际相关 HTML 和所有参与的事件处理程序，就很难按照您描述的顺序提供更多信息。

【讨论】：

谢谢。您已经回答了为什么我会丢失点击事件的问题。唯一的问题是 ajax 调用解决了唯一性验证。将 async 设为 true 会返回不准确的验证结果。
使 ajax 调用异步不会返回不准确的结果 - ajax 调用以任何方式返回相同的结果。您将不得不稍微重构您的代码以使用异步调用，但它的用户体验要好得多。