jQuery改变和点击事件计时

Question

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

场景是编辑文本框，然后直接单击按钮。 change 事件总是被触发，但如果它包含一个警报，则永远不会调用 click 事件。如果我作弊并在警报周围设置了超时（您可能需要对那里的值进行一些调整），则通常会调用 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>

具有保存行为的 Ajax 调用如下：

$.ajax({
        type: 'POST',
        url: postUrl,
        data: form.serialize(),
        beforeSend: function () {
            // display overlay for work in progress
        },
        success: function (result) {
            updateTableSuccess();
        },
        complete: function () {
            // hide overlay for work in progress
        },
        error: function (jqXHR) {
            if (jqXHR.responseText.length > 0) {
                showErrorMessage(jqXHR.responseText);
            }
        }
    });

叠加层只是将 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();
};

谁能解释一下为什么 jQuery 会有这样的行为，以及如何在没有 setTimeout hack 的情况下做得更好？

感谢您的帮助 =)

Answer 1

Nischo，将您的AJAX 代码插入change 函数时，我无法复制阻塞。如果您希望在提交时触发click 时阻止AJAX，请查看此处。

jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

祝你好运。

---

在您的解释之后，我确实看到了您所指的内容，因为 change 事件需要失去焦点才能触发您的 click 函数，因为失去焦点是您的点击导致的阻塞而被覆盖。

您可以按照您的说明使用timeOut，也可以在text 输入上重构为keydown 方法。见下文：

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

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

小提琴： http://jsfiddle.net/9WXBe/2/

---

尼乔，

在获取您的代码并将其放入 jsFiddle 之后，我看不到更改事件被触发的任何问题。即使代码中有alert。

$("input[type=text]").change() 在文本框失去焦点之前不会触发，其他元素如select、radio 将在进行选择或更改后立即执行此操作。

这是小提琴： http://jsfiddle.net/w9Thc/1/

Answer 2

如果其他人有同样的问题，只是一个简短的回答：问题确实是覆盖整个页面的覆盖，导致与警报相同的行为。

我对此的解释是，更改事件被触发，阻塞 UI，并且 click 事件不能再被触发，因为正如 https://stackoverflow.com/users/1861269/john-gerdsen 所建议的那样。

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

这可能会帮助任何尝试解决覆盖问题的人： HTML "overlay" which allows clicks to fall through to elements behind it

Answer 3

问题似乎只发生在 Firefox 上。其他浏览器似乎没有问题。我通过重写不使用文本字段更改事件来解决我的问题。不幸的是，我有另一段代码无法做到这一点。更改事件似乎确实阻止了 UI，因为我在“单击”按钮上没有发现任何触发的事件。