jQuery code triggerato due volte per bind ('keyup change') quando si preme il tasto

Question

Ho un numero di input che dovrebbe attivare jQuery ad ogni modifica. Per fare ciò, eseguo uno $('#id').bind('keyup change', ...);, che viene attivato su qualsiasi keyup o controller del mouse modificato.

Questo funziona trova per clic del mouse (trigger change) e per digitare numeri (trigger keyup). Ma per i tasti cursore attiva sia change sia keyup. Come posso farlo in modo che si inneschi solo una volta in tutte le situazioni?

Ecco un esempio che mostra il problema: http://jsfiddle.net/jSjkE/

Answer 1

Si hanno un concetto sbagliato sull'evento onchange.

Non NON fuoco quando il valore cambia dell'elemento, invece, spara solo quando sono soddisfatte 2 condizioni:

• Le sfocature elemento (non è più attivo);
• L'elemento ha un valore diverso rispetto a quando ha ottenuto la messa a fuoco.

Nota: quanto sopra è per gli ingressi di tipo text. Per i tipi checkbox/radio si attiva non appena le loro modifiche alla proprietà checked e per gli elementi select non appena viene modificata l'opzione selezionata.

L'evento onchange (eventualmente erroneamente) si attiva quando si preme le frecce su/giù di input type="number" di Chrome. Si dovrebbe non contare su di esso, come molti altri principali browser non hanno ancora un'implementazione del numero di ingressi ancora e potrebbe non seguire questo comportamento.

Invece, poiché si utilizza HTML5, è necessario fare affidamento sull'evento HTML5 oninput, che viene attivato ogni volta che viene aggiornato il valore dell'elemento.

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

Fiddle

edit:

per browser meno recenti (e non HTML5), è possibile utilizzare l'evento keyup come ripiego:

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

Il il modo più resiliente per fare questo per i browser non HTML5 sarebbe havin ga setInterval controllando costantemente se il valore dell'elemento è cambiato, come keyup non si attiva se si seleziona del testo e trascinandolo nella casella di testo - si potrebbe provare .on('input keyup mouseup', ma poi non si innescherà se l'utente utilizza il menu Modifica> Incolla del browser .

EDIT2:

Se non si desidera utilizzare setInterval, si può mettere un enorme di eventi Mappa all'interno del .on/.bind e controllare se il valore è cambiato, memorizzando il valore corrente nel .data() di l'elemento:

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

ho aggiunto la onchange evento alla mappa degli eventi, quindi anche se lo oninput e onkeyup non riesce (browser non html5 utilizzando il menu del browser per incollare i dati), l'evento si attiverà ancora quando l'elemento perde lo stato attivo.

Ecco il montaggio finale con una commentato setInterval e .data() evitare l'uso di variabili globali, in modo da poter scegliere quale dei fallback da utilizzare:

$(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){ ...