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 - 綁定多個事件並排除其他事件

回答

相關問題