绑定多个事件并排除其他事件

jQuery - bind multiple events and exclude other events

本文关键字：事件 排除 其他 绑定      更新时间：2023-09-26

我有一个搜索表单，有<input type="text">和<select>形式元素。在这个表单中，我有这个jQuery。

$('#searchform :input').stop().on('keyup change',function(){
    // do some ajax stuff
})

棘手的是脚本使用.on('keyup change' etc.)侦听多个事件的方式。这工作得很好，但有一个问题…

当输入字段失去焦点时，脚本jquery侦听器被触发。

这里有一个演示来解释我的意思https://jsfiddle.net/o2k4jf90/1/

我想做这样的事情…

$('#searchform :input').stop().on('keyup change not:blur',function(){
    // do some ajax stuff
})

…但这显然是无稽之谈。我能做什么?

尝试用input事件替换change、keyup事件

$(document).ready(function () {
    $(':input').on('input',function(e) {
        $('#report').append('stuff happened<br />');
    })
});

jsfiddle https://jsfiddle.net/o2k4jf90/3/

这个问题是因为当input字段失去焦点时，以及当select的选择选项被修改时，change事件会触发。要实现所需的功能，需要分别绑定事件。试试这个:

$(document).ready(function () {
    $('input').keyup(stuffHappened);
    $('select').change(stuffHappened);
})
function stuffHappened() {
    $('#report').append('stuff happened<br />');
}

更新小提琴

如果您将事件挂钩到form，您仍然可以使用单个事件处理程序，但是您需要检查事件的type和target.tagName以实现相同的逻辑，这一点都不美观:

$('form').on('keyup change', function(e) {
    if ((e.type == 'change' && e.target.tagName == 'SELECT') 
        || (e.type == 'keyup' && e.target.tagName == 'INPUT')) {
        $('#report').append('stuff happened<br />');
    }
});

基于这个原因，我建议使用前一种方法

相关文章：