如何在点击清除按钮后保持jquery更改（）不被触发

我有一个带有1 - 5个输入框的搜索UI，它们在change（）事件中导致ajax动作。如何在点击清除按钮后保持jquery更改（）不被触发

我也有一个'清除标准'按钮，应该在点击时清除输入框。这工作正常，但我有一个我想摆脱的副作用。

如果用户在搜索输入中输入了数据但尚未离开该字段（即，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(); 
     } 
    }); 
});

来源

2013-02-20 scott-pascoe

使用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()。

DEMO。

来源

2013-02-20 02:30:04

哇！我有一个投票，但如果你（无论你是谁）告诉我我的错误，所以我可以学习，并会尝试做出正确的或删除它的帮助。 – 2013-02-20 03:50:43

不错的解决方案。你解决了我的问题。 – 2013-02-20 14:01:55

@ scott-pascoe，很高兴知道它有帮助，但我很困惑，因为我在右边（在我看来）的回答中得到了一个反对票。谢谢:-) – 2013-02-20 16:59:15

-1

看起来该位是造成问题：

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

这里这个功能，它被称为：

function searchChangeHandler(e) { 
    ajaxSearch(); 
}

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

来源

2013-02-20 02:18:36

对不起，这甚至不接近解决问题。我想在用户通常离开输入字段时触发ajaxSearch，也就是searchChangeHandler。我只是不想在点击“清除”按钮时触发它。 – 2013-02-20 13:57:39

如何在点击清除按钮后保持jquery更改（）不被触发

回答

相关问题