jQuery更改并单击事件计时

我的jQuery更改和单击事件似乎有时间问题。在我的站点中，我使用了一个Ajax帖子而不是一个警报，但是使用警报复制它更容易。我有一个使用jQuery版本1.7.1的简单HTML页面

场景是编辑文本框，然后直接单击按钮。始终激发更改事件，但如果它包含警报，则永远不会调用单击事件。如果我作弊并在警报周围放置一个超时（您可能需要对那里的值进行一些处理），则通常会调用click事件

/**编辑**/ 如果在更改事件中的某个位置设置断点并等待几秒钟，则单击事件也将无法触发

<script type="text/javascript">
$(document).ready(function ()
{
    $("input[type=text]").change(function () {
        //alert('changed');

        $("#text").text('changed');

        setTimeout(function () {
            $("#text").text('changed timeout');
            alert('changed');
        }, 100);

    });

    $("input[type=submit]").click(function () {
        alert('clicked');
        $("#text").text('clicked');
    });
});
  </script>
  <div id="main">
    <div class="container">
        <input type="text" />
        <input type="submit" value="click me" />
        <div id="text" >bla</div>
    </div>
  </div>

覆盖只是将2个div附加到body标记

/**编辑**/似乎覆盖是真正的问题，导致与警报相同的行为，并阻止触发单击事件

showWorkInProgress = function (message, elementId)
{
    if ($("#overlay").length == 0)
    {
        $("<div id='overlay' class='ui-widget-overlay'></div>").appendTo("body");
    }

    if ($("#workInProgress").length == 0)
    {
        $("<div id='workInProgress'></div>").appendTo("body");
    }

    $("#workInProgress").html(message);
    if (elementId != null)
    {
        $("#workInProgress").center(elementId);
    }
    else
    {
        $("#workInProgress").center();
    }
    $("#overlay").show();
    $("#workInProgress").show();
};

showWorkInProgress=函数（消息，元素ID）
{
如果（$（“#覆盖”）.length==0
{
$（“”）。附件（“正文”）；
}
如果（$（“#工作进度”）.length==0
{
$（“”）。附件（“正文”）；
}
$（“#工作进度”）.html（消息）；
if（elementId！=null）
{
$（“#工作进度”）.center（elementId）；
}
其他的
{
$（“#工作进度”）.center（）；
}
$（“#覆盖”）.show（）；
$（“#工作进度”）.show（）；
};

有人能解释为什么jQuery的行为是这样的吗？我如何在没有setTimeout的情况下做得更好

---

感谢您的帮助=）

Nischo，在将

AJAX

代码插入

change

函数时，我无法复制阻塞。如果您想阻止

AJAX

，如果在提交时触发

单击

，请查看此处

祝你好运

---

在您的解释之后，我确实明白了您所指的内容，因为

更改

事件需要失去焦点才能触发您的

单击

功能被覆盖，因为失去焦点是您的单击所导致的阻塞

您可以使用所述的

超时

，也可以在

文本

输入上重构为

按键

方法。见下文：

$(document).ready(function () 
{
   $("input[type=submit]").click(function () {
      $("#text").text('clicked');
   });

   $("input[type=text]").keydown(function () {
      alert('changed');
      $("#text").text('changed');
   });
});

小提琴：

---

尼索

在获取代码并将其放入JSFIDLE之后，我看不出触发更改事件有任何问题。即使代码中有

警报

$（“输入[type=text]”）。在文本框失去焦点之前，change（）

不会启动，其他元素如

选择

，

无线电

将在进行选择或更改后立即执行此操作

这是小提琴：

---

如果其他人也有同样的问题，请给出一个简短的回答：问题实际上是覆盖层阻塞了整个页面，导致了与警报相同的行为

我对此的解释是，change事件被触发，阻塞了UI，而click事件就不能再被触发了，因为正如所建议的那样

对于这个问题，我找到的唯一解决方案是使覆盖层变小，只阻塞真正需要阻塞的部分。超时同样有效，但并非在所有情况下都有效，因为每台机器都有不同的性能

这可能有助于尝试解决覆盖问题的任何人：

---

问题似乎只发生在Firefox上。其他浏览器似乎没有这个问题。我修复了我的问题，重新编写内容，不使用文本字段更改事件。不幸的是，我有另一段代码，我不能这样做。更改事件似乎会阻塞UI，因为我在“单击”按钮上找不到任何类型的事件

警报与此有什么关系？警报不会改变代码的执行方式，它只是阻止浏览器，直到您单击“确定”。当输入失去焦点时，会发生更改事件，导致警告框阻塞浏览器，从而阻止提交按钮与之交互（我猜是这样）。使用console.log（）进行调试，或者更好，使用调试器逐行进行调试；再等几秒钟，点击事件也不会被触发。我将为此编辑帖子。你的代码运行得很好。不要陷入警戒状态。进入真正的问题。您是否在ajax请求中使用了

async:false

？不，这是默认值，所以是真的。对不起，可能我不够清楚。问题不在于更改事件，而在于不再触发的单击事件。更改事件总是被正常触发。上面为您更新的解决方案反映了这个问题，请使用keydown（）谢谢，我更希望不要使用keydown，因为在ajax调用中，我从数据库获取数据，它可能不会有这样最好的性能，或者我会启动6个请求并立即再次中止它们。我仍然不明白的是，如果它只在页面上设置一个文本，为什么它不会阻止事件，但会在大约10毫秒后阻止它。是的，我忘记了整个AJAX调用。因此，您计划在用户从框中移除焦点时调用AJAX，问题是他们通常先单击submit。是的，没错。我最好的情况是知道在调用更改的事件时是否单击了按钮，如果是，甚至不要执行ajax，只执行单击事件。但我也很乐意稍后中止通话=）

$(document).ready(function () 
{
   $("input[type=submit]").click(function () {
      $("#text").text('clicked');
   });

   $("input[type=text]").keydown(function () {
      alert('changed');
      $("#text").text('changed');
   });
});