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

我有一个搜索表单，它既有<input type="text">也有<select>表单元素。听该表单我有了这个jQuery的...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 
})

...但显然这是无稽之谈。我能做什么？

来源

2015-07-11 Doug

这是'change'处理程序，是造成如此，因为它只有当激发的元素失去焦点。删除它，它会像你期望的那样工作。 –

尝试删除“更改”事件 –

尝试为change代input事件，keyup事件

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

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

来源

2015-07-11 15:05:29 guest271314

哦 - 现货！更简洁，不需要我重建我的功能。好工作。 – Doug

问题是因为当input字段丢失焦点并且select的选定选项被修改时change事件触发。为了实现你所需要的，你需要分别绑定事件。试试这个：

$(document).ready(function() { 
    $('input').keyup(stuffHappened); 
    $('select').change(stuffHappened); 
}) 

function stuffHappened() { 
    $('#report').append('stuff happened<br />'); 
}

Updated fiddle

你仍然可以使用一个单一的事件处理程序，如果你挂钩事件到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 />'); 
    } 
});

因此，我会建议使用前一种方法。

来源

2015-07-11 14:59:00

最佳答案，并进行了很好的解释 - 谢谢:)不得不单独绑定事件 - 我的听众非常整齐。但需要一定！ :) – Doug

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

回答

相关问题