कुंजी

Question

दबाते समय jQuery कोड बाइंड ('कीप चेंज') के लिए दो बार ट्रिगर किया गया है मेरे पास एक संख्या इनपुट है जो प्रत्येक परिवर्तन पर jQuery को ट्रिगर करना चाहिए। ऐसा करने के लिए, मैं $('#id').bind('keyup change', ...); करता हूं, जो कि किसी भी कीप या माउस-नियंत्रक पर ट्रिगर होता है।

यह काम माउस क्लिक (ट्रिगर्स change) और टाइपिंग नंबरों के लिए ढूंढता है (ट्रिगर keyup)। लेकिन कर्सर कुंजी के लिए यह change और keyup दोनों को ट्रिगर करता है। मैं इसे कैसे बना सकता हूं ताकि यह सभी स्थितियों में केवल एक बार ट्रिगर हो? http://jsfiddle.net/jSjkE/

Answer 1

आप onchange घटना के बारे में एक गलत अवधारणा है:

यहाँ समस्या दिखा एक उदाहरण है।

यह नहीं आग जब तत्व का मान परिवर्तन, बजाय, यह केवल आग जब 2 शर्तें पूरी होती है:

• तत्व blurs (ध्यान केंद्रित खो देता है);
• जब तत्व फोकस प्राप्त करता है तो तत्व का एक अलग मूल्य होता है।

नोट: उपर्युक्त text के प्रकार के इनपुट के लिए है। checkbox/radio के प्रकारों के लिए जैसे ही उनके checked संपत्ति में परिवर्तन होते हैं, और select तत्वों के लिए जैसे ही इसके चयनित विकल्प में परिवर्तन होता है।

onchange ईवेंट (संभावित रूप से गलत) आग जब आप क्रोम के input type="number" ऊपर/नीचे तीर दबाते हैं तो आग लगती है। आपको पर भरोसा नहीं करना चाहिए, क्योंकि कई अन्य प्रमुख ब्राउज़रों में अभी तक संख्या इनपुट का कार्यान्वयन नहीं है और यह इस व्यवहार का पालन नहीं कर सकता है।

इसके बजाय, जैसा कि आप HTML5 का उपयोग कर रहे हैं, आपको oninput HTML5 ईवेंट पर भरोसा करना चाहिए, जब भी तत्व का मान अपडेट हो जाता है।

$(function() { 
    var count = 0; 
    $('#num').on('input', function(e) { 
     console.log('update ' + (++count) + ' Value: ' + this.value);  
    }); 
});​ 

Fiddle

संपादित करें:

$('#num').on('input keyup', function(e) { 

:

पुराने (और गैर-एचटीएमएल 5) ब्राउज़रों के लिए, आप keyup घटना फ़ॉलबैक के रूप में उपयोग कर सकते हैं गैर-एचटीएमएल 5 ब्राउज़र के लिए ऐसा करने का सबसे लचीला तरीका हैविन ga setInterval लगातार जांच रहा है कि तत्व का मान बदल गया है, क्योंकि keyup ट्रिगर नहीं करता है अगर आप कुछ टेक्स्ट चुनते हैं और इसे टेक्स्टबॉक्स में खींचते हैं - तो आप .on('input keyup mouseup' आज़मा सकते हैं, लेकिन फिर उपयोगकर्ता ट्रिगर के संपादन> पेस्ट मेनू का उपयोग करने पर ट्रिगर नहीं करेगा ।

EDIT2:

आप setInterval का उपयोग नहीं करना चाहते, तो आप रख सकते हैं एक बड़ी घटनाओं .on/.bind अंदर नक्शा और देखें कि क्या मूल्य का .data() में वर्तमान मूल्य भंडारण के द्वारा बदल गया है तत्व:

var count = 0; 
$('#num').on('input keyup change', function(e) { 
    if (this.value == $(this).data('curr_val')) 
     return false; 
    $(this).data('curr_val', this.value); 

    console.log('update ' + (++count) + ' Value: ' + this.value); 
}); 

Fiddle

मैंजोड़ दिया है इवेंट मैप्स में 10 इवेंट, इसलिए oninput और onkeyup विफल रहता है (डेटा पेस्ट करने के लिए ब्राउज़र के मेनू का उपयोग करके गैर-एचटीएमएल 5 ब्राउजर), onchange ईवेंट तब भी फंस जाएगा जब तत्व फोकस खो देता है।

यहाँ तो आप चुन सकते हैं वैश्विक का उपयोग कर से बचने के लिए एक टिप्पणी की setInterval और .data() के साथ अंतिम संपादित, जो फ़ॉलबैक का उपयोग करने के लिए:

$(function() { 
    var $num = $('#num'); 
    $num.data('curr_val', $num.val()); //sets initial value 

    var count = 0; 
    setInterval(function(){ 
     if ($num.data('curr_val') == $num.val()) //if it still has same value 
      return false; //returns false 
     $num.data('curr_val', $num.val()); //if val is !=, updates it and 
     //do your stuff 
     console.log('update ' + (++count) + ' Value: ' + $num.val()); 
    }, 100); //100 = interval in miliseconds 
}); 

Fiddle

Answer 2

$('input').unbind('keyup').bind('keyup',function(e){ ...