如何在单击清除按钮后阻止jquery change()启动

Question

我有一个带有1-5个输入框的搜索UI，这些输入框会对它们的change（）事件执行ajax操作。

我还有一个"清除标准"按钮，点击后应该会清除输入框。这很有效，但我有一个副作用，我想消除。

如果用户在搜索输入中输入了数据，但还没有离开字段（即change（）尚未触发），并且他们单击"清除条件"，这将导致触发更改并发生ajax操作，然后输入框将被清除。

如果用户单击"清除"按钮，我想停止更改（）。

我开始编写serachChangeHandler函数，但还没有弄清楚如何识别输入框是否失去了对.ui-clear按钮的关注。

我的问题是：我可以在变更处理程序中告诉焦点在哪里，还是应该从不同的方向处理问题？

---

我的相关javascript如下所示：

function displayResults(data) {
    $('.searchResults').html(data);
}
function searchChangeHandler(e) {
    ajaxSearch();
}
function ajaxSearch() {
    $('#selectedRecord').empty();
    if (isSearchable()) {
        var myForm = $('#searchForm');
        $.post(myForm.URL, myForm.serialize(), displayResults);
    } else {
        $('.searchResults').empty();
    }
}
function displayRecord(data) {
    $('#selectedRecord').html(data);
}
function searchResultClick(e) {
    $('.searchResult').removeClass('selected');
    $(this).addClass('selected');
    $.ajax({
        url: this.id,
        success: displayRecord,
        dataType: "html"
    });
}
function clearSearchClick() {
    $('.search input:text').val("");
    toggleClearButton(false);
    $('.searchResults').empty();
    $('.first').focus();
}
function isSearchable() {
    var allCrit = "";
    $('.search input:text').each(function () {
        allCrit += $(this).val();
    });
    return allCrit !== "";
}
function toggleClearButton(callback) {
    $('.ui-clear').toggleClass("clear-enabled", callback);
}
$(function () {
    toggleClearButton(isSearchable());
    $('.ui-clear').click(clearSearchClick);
    $('.search input:text').focusout(searchChangeHandler);
    $('.search input:text').keyup(function () { toggleClearButton(isSearchable()); });
    $(document).keypress(function (event) {
        if (event.which === 13) {
            event.preventDefault();
            ajaxSearch();
        }
    });
});

Answer 1

只是一个使用setTimeout 的想法

function clearSearchClick(){
    $('.search input:text').val('');
}
function searchChangeHandler(){
    setTimeout(function(){
        if( isSearchable() )
        {
            // Fire your ajaxSearch() function
        }
    }, 500);
}
$(function(){
    $('.ui-clear').click(clearSearchClick);
    $('.search input:text').focusout(searchChangeHandler);
});

更新：此外，在$(document).keypress(...)中，您应该调用searchChangeHandler()函数，而不是直接调用ajaxSearch()函数，因为searchChangeHandler()正在检查输入的状态，并在超时后触发ajaxSearch()。

演示。

Answer 2

看起来这一位导致了问题：

$('.search input:text').focusout(searchChangeHandler);

这里的这个函数被称为：

function searchChangeHandler(e) {
    ajaxSearch();
}

*编辑**应该能够删除这两个功能，问题应该会消失！