Question

在我的代码中，我将Ajax查找绑定到文本框的focusout事件。如果提供的数据无效，Ajax请求将显示错误消息。我还有一个＆＃34;取消＆＃34;表单上的按钮，当单击时，隐藏一些字段，包括带有请求的字段。但是，如果在文本框中指定了无效值，则单击“取消”按钮将触发Ajax请求（因为文本框失去焦点）并显示错误消息。

我想要的是当我点击取消按钮时，此Ajax事件被而不是触发，因此即使用户输入了无效的条目，表单也将被关闭＆＃34;没有显示错误消息。

这可能吗？

代码就是这样，基本上是：

$('#txtPostalCode').focusout(function() { 
    postalCodeLookup($(this).val()); // ajax method wrapper
});

$('button#cancelButton').click(function() { 
    $('#txtPostalCode').attr('disabled', true).addClass('disabled'); // applies CSS style to make textbox look like a label
    $('#txtPostalCode').val($('#oldPostalCode').val()); // restore old value
});

正如我所说，因为焦点在点击之前触发，你不能取消＆＃34;表单是否在文本框中有无效条目，因为它将触发ajax请求并提出错误消息。这个问题从可用性的角度来看，有人可能会输入无效的邮政编码，意识到他们的错误，然后尝试取消表单，但表单不会让自己被取消，直到他们输入有效的邮编代码（当表单实际取消时，它会被覆盖）。

如果有更好的方法来处理我想要做的事情，我也听到了这一点，这是我收到要求时首先想到的事情：）

Answer 1

在取消按钮的focus事件之前将触发

click事件，因此除了中止ajax请求之外，您无法执行任何操作。在abort对象上调用XHR方法将中止当前请求。

或者，您可以在focusout事件上触发ajax请求之前有一些延迟，如果您单击取消按钮，则清除超时。

像这样。

$(function(){
    var xhr;
    $('input').focusout(function(){
        xhr = $.ajax({
                 ...
              });
    });

    $('.cancel').click(function(){
        xhr.abort();
        //other stuff
    });
});

或者

$(function(){
    var timeoutId;
    $('input').focusout(function(){
        timeoutId = setTimeout(function(){ 
            $.ajax({
                 ...
            });
        });
    });

    $('.cancel').click(function(){
        clearTimeout(timeoutId);
        //other stuff
    });
});

Answer 2

这可能有点hacky，但我会设置一个变量，通过将鼠标悬停在取消按钮上来打开和关闭。然后在focusout代码中放入一个if块，只有当上述变量为false时才允许它触发。

如何在单击某个按钮时忽略jQuery事件？

2 个答案: