jQuery：click事件未触发

Question

我使用引导程序创建了这个小的“模态”形式，如下所示：

<div class="modal fade"  tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="H1">Create new Workflow</h4>
      </div>
      <div class="modal-body">
        <ul class="list-group">
          ....
          <li class="list-group-itemCustom">
                 <input type="text" id="txtWorkflowAdmin" />
         </li>
          ...
        </ul>
      </div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
           <button type="button" id="BtnSave" class="btn btn-primary">Save</button>
     </div>
     </div>
    </div>

模态存储在单独的aspx页中。 我使用ajax调用检索模态，然后绑定事件处理程序：

function LoadModals() {
    $.ajax({
        type: "GET",
        url: "Modalforms.aspx",
        success: function (data) {
            $("#Divmodals").html(data);
            SetModalEventtriggers();
        },
        error: function (xhr, errStatus, thrownError) {
            LogException(errStatus, thrownError, "LoadModals", []);
        }
    })
}

function  SetModalEventtriggers() {
        $("#txtWorkflowAdmin").blur(function () {
            CheckAdmin($(this));
        })

        $("#BtnSave").click(function () {
            SaveWorkflow();
        })
}

这两个事件完全独立地工作。 示例当我单击没有txtWorkflowAdmin的按钮（ BtnSave ）时，将执行SaveWorkflow函数。

然而，当我的txtWorkflowAdmin成为焦点时，我单击BtnSave 。 然后，不会触发.Click Function 。 虽然执行OnBlur的功能。 当我点击第二次上BtnSave那么SaveWorkflow执行。

为什么会发生这种现象？ 我是否缺少一些有关Javascript事件的基本知识？

函数（提供的基本代码：不包括错误处理的更深层代码）：

function SaveNewWorkflow() {

        ... (Check if other fields are filled in

        if (!CheckValidityUsername($("#txtWorkflowAdmin").val())) {
            $("#WorkflowAdminErrorMessage").css("display", "block");
            return;
        }

        ... (If all fields are filled in => This piece of code is never reached when   txtWorkflowAdmin is focussed)
        $.ajax({
            type: "POST",
            url: "Actions.aspx",
            data: outerJsonData,
            success: function () {
               ... Do some actions here. 
           }}) 
 }

function CheckAdmin(txtAdmin) {
    // Show/Hide errormessage
    if (!CheckValidityUsername(txtAdmin.val())) {
        btnClicked.closest("li").prev().css("display", "block");
    }
    else {
        btnClicked.closest("li").prev().css("display", "none");
    }
}


function CheckValidityUsername(userName) {
    var validUser = true;
    var jsonData = { action: "CheckUsername",
            SidUser: userName,
            Docbase: docbase
        };

    $.ajax({
        type: "GET",
        async: false,
        url: "Search.aspx",
        data: jsonData,
        success: function (data) {
            var obj = jQuery.parseJSON(data);
            validUser = obj.ValidUser;
            return validUser;
        },
        error: function (xhr, errStatus, thrownError) {
            LogException(errStatus, thrownError, "CheckValidityUsername", jsonData);
        }
    })

    return validUser;
}

感谢任何在帮助我的人！ 谢谢你们，这个问题很快得到解决！

Answer 1

尝试使用preventDefault：

$("#BtnSave").click(function (e) {
        e.preventDefault();
        SaveWorkflow();
    })

更新：

我认为这应该工作：

$("#BtnSave").click(function () {
    CheckAdmin($("#txtWorkflowAdmin"));
    SaveWorkflow();
})

Answer 2

而不是单击，请尝试使用mousedown ：

$("#BtnSave").mousedown(function () {
    SaveWorkflow();
});

因为单击前会触发blur 。

演示版

---

为什么会发生这种现象？

请参见click/focus $("#txtWorkflowAdmin")按钮时，此按钮将获取焦点，并且将blur事件绑定到该事件， .blur()始终会首先触发点击。 您可以看到以下两行内容以及正在执行的操作：

1. 释放鼠标左键时， click事件起作用。
2. 而mousedown只会寻找鼠标左键的按动。

---

正如@webeno所说，这是检验mousedown首先起作用的另一招：

演示@小提琴

---

尽管也可以使用setTimeout()方法完成此操作：

function CheckAdmin(txtAdmin) {
  setTimeout(function(){
     // Show/Hide errormessage
     if (!CheckValidityUsername(txtAdmin.val())) {
       btnClicked.closest("li").prev().css("display", "block");
     } else {
       btnClicked.closest("li").prev().css("display", "none");
     }
  }, 1000);
}

---

使用setTimeout（）方法进行演示