Question

$("#id_address_input").bind("blur",function(e){
    //do a lot of stuff, set variables.
});

所以，我有一个文本框，当用户离开它时......这件事会被解雇并进行处理。

好的，问题是：

当用户点击表单“提交”按钮时，会触发此模糊事件。在处理过程中，表单提交。这让一切都搞砸了。

我该如何解决这个问题？我想在form.submit上添加延迟，以便它完成处理。但是，这是一个坏主意，因为我不知道用户的浏览器和/或谷歌地图有多快。

Answer 1

使用javascript提交表单。编写一个调用onsubmit的函数，并检查模糊事件中应该发生的事情是否已经完成。然后只提交表格

Answer 2

试一下旗帜？

var doSubmit = true;

$("#id_address_input").bind("blur",function(e){
    doSubmit = false;
    //do a lot of stuff, set variables.
    doSubmit = true;
});

$("#form").submit(function(){
    if(doSubmit){
        return true;
    }else{
        // keep checking until doSubmit is true
        window.setInterval(function(){if(doSubmit){$("#form").submit();}},1000);
        return false;
    }
});

Answer 3

在你的blur处理程序中，你必须做一些“产生”浏览器的事情（setTimeout，异步ajax调用等），否则，浏览器不会打断你的用于提交表单的JavaScript代码。请参阅下面的示例证明。

如果从blur处理程序中执行从浏览器中获取的内容，则必须使用submit处理程序阻止表单提交，然后当所有内容（包括blur处理程序中的各种操作）准备就绪时，它会被提交。这可能有点复杂。

最好的答案是删除blur处理程序中出现的任何内容。如果您不能这样做，您可能正在查看表单上的锁定计数器并让提交处理程序检查锁定计数器：

// Somewhere, ensure the form has a lock count of zero
$('#theForm').data('submitlock', 0);

// Your blur handler increments the lock
// In the blur handler:
$('#theForm').data('submitlock', $('#theForm').data('submitlock') + 1);
// ...and when done
$('#theForm').data('submitlock', $('#theForm').data('submitlock') - 1);

// The submit handler might look something like this:
$('#theForm').submit(function() {

    // Get a jQuery wrapper for the form
    var $this = $(this);

    // Locked?
    if ($this.data('submitlock') > 0) {
        // Yes, set up the recheck and prevent form submission
        setTimeout(recheck, 10);
        return false;
    }

    // Function to periodically retry submission
    function recheck() {
        // Still locked?
        if ($this.data('submitlock') > 0) {
            // Keep waiting
            setTimeout(recheck, 10);
        }
        else {
            // Nope, submit the form using the underlying DOM object's submit function
            $this[0].submit();
        }
    }
});

Live example（我们下面的阻止示例的一个版本，但已更新为屈服于浏览器）

请注意，如果您的表单被提交到新窗口，您可能会遇到弹出窗口阻止程序（因为新窗口不在直接响应用户点击）。但是如果你没有做那样的事情，那么你就可以在上面做好准备了。

以下是blur处理程序在提交表单之前导致实质性延迟（4秒）的示例（live copy）：

HTML：

<form action='http://www.google.com/search' target='_new'>
  <label>Search for:
    <input type='text' name='q' value='foo'></label>
  <br><input type='submit' value='Search'>
</form>

JavaScript的：

$('input[name=q]').blur(function() {

  var end, counter;

  display("Start blurring");
  counter = 0;
  end = new Date().getTime() + 4000;
  while (new Date().getTime() < end) {
    ++counter;
    if (counter % 100000 == 0) {
      display("Still blurring");
    }
  }
  display("Done blurring");

});

将光标放在文本框中，然后单击“搜索”。您将看到四秒钟的延迟，然后搜索将在新窗口中打开。我在Chrome，Firefox和Opera（在Linux上），Windows 2000上的IE6和Windows XP上的IE7上进行了测试。一切都表现得一样。

我如何在JQuery中解决这个问题？

3 个答案: