在后台执行验证表单的ajax调用时,不会触发(或忽略)Click Event

Click Event is not fired (or ignored) when performing an ajax call in the background that validates a form

本文关键字:Event Click 表单 验证 执行 后台 ajax 调用      更新时间:2023-09-26

我正在验证一个对象的"name"以确保它是唯一的。要执行此操作,我使用jQuery basisstance验证插件。我在验证方法期间发出一个同步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'));

当我在"name"文本字段中输入一个名称,然后立即点击下面定义的提交按钮时,我希望调用方法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。但是,如果我键入"name",然后在名称文本字段上失去焦点,则在单击按钮之前,该方法将被调用,没有任何戏剧性。

所以在本质上,我的问题是当名称文本字段有焦点,我必须双击保存按钮,以确保addUserRole方法被调用。

有没有人知道为什么我的点击事件似乎丢失在第一次点击在这些情况下,而不是第二次?我不能让用户双击按钮来保存

同步ajax调用阻塞UI事件,这样做时可能会丢失一些事件。使用异步ajax调用并让用户事件实时发生会好得多。

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