Question

我使用bootstrap创建了这个小的'modal'形式，看起来有点如下：

<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-call检索模态，然后绑定事件处理程序：

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

这两项活动完全独立。示例当我单击没有BtnSave的按钮（txtWorkflowAdmin）时，焦点会被执行，然后执行函数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;
}

Thanx给任何帮助过我的人！谢谢你们，问题很快就解决了！

Answer 1

尝试使用preventDefault：

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

<强>更新

我认为这应该有效：

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

Answer 2

而不是点击试用mousedown：

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

因为blur在点击之前被解雇了。

Demo

为什么会出现这种情况？

在click/focus按钮上查看$("#txtWorkflowAdmin")时，然后此按钮获取结果，并且当您绑定了blur事件时，.blur()始终会因点击而被点击。你可以看到以下两行发生了什么，你可以在这里做些什么：

click事件有效。
而mousedown只查找鼠标左键。

正如@webeno评论的那样，这是结帐mousedown首先工作的另一个小提琴：

Demo @ fiddle

虽然这也可以使用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);
}

JQuery：点击事件没有激活

2 个答案:

Demo @ fiddle

Demo with setTimeout() method