jQuery Mouseup löst nur bei einem zweiten Klick aus

Question

Ich habe ein Kontrollkästchen, das nach Label ausgewählt wird. Ich füge dann eine Klasse von ausgewählt zu dem Elternteilli hinzu. Sobald dies geschieht, möchte ich die Instanzen von '.gquiz-correct-choice .gquiz-indicator' auf der Seite zählen.

Die Anzahl wird nur aktualisiert, wenn ich ein zweites Mal klicke.

Ich habe versucht, 'Rückkehr falsch' hinzuzufügen. Binding der Klick & MouseUp, mit Änderung statt MouseUp, aber ich kann nicht scheinen, damit es funktioniert.

jQuery(document).on('click', '.gfield_radio li label', function(event) { 
    jQuery(this).parent('li').addClass('selected'); 
}); 

jQuery('.gfield_radio li label').mouseup(function(){ 
    var numItems = jQuery('.gquiz-correct-choice .gquiz-indicator').length; 
    jQuery('.pts').html(numItems + '/20'); 
    return false; 
    }); 

Answer 1

Der erste Klick schien ‚entführt‘ werden, so habe ich beschlossen, eine Auszeit fügen Sie die Zählung nach auszuführen.

jQuery(document).on('click', '.gfield_radio li label', function(event) { 
jQuery(this).parent('li').addClass('selected'); 
    setTimeout(
     function() { 
      var numItems = jQuery('.gquiz-correct-choice .gquiz-indicator').length; 
      jQuery('.pts').html(numItems + '/20');   }, 
     500); 
    }); 

Answer 2

auf Fehler jquery Ereignis nicht ausgelöst nur versuchen, auf Konsole zu drucken. In dieser codepen Sie beide Ereignisse sehen gleichzeitig gefeuert (http://codepen.io/f7o/pen/vKxKXX)

jQuery('.clickit ul li').click(function(event) { 
    console.log('added class') 
    jQuery(this).parent('ul').addClass('selected'); 
}); 

jQuery('.clickit li').mouseup(function() { 
    console.log('count') 
}); 

Answer 3

Dies geschieht, weil mouseup bevor Klick ausgeführt wird.

Ein Weg, um Ihr Problem zu lösen ist:

// global variable to test if mouse 
var mousedUpFired = false; 

function doMouseUp() { 
    var numItems = jQuery('.gquiz-correct-choice .gquiz-indicator').length; 
    jQuery('.pts').html(numItems + '/20'); 
} 


jQuery(document).on('click', '.gfield_radio li label', function(e) { 
    jQuery(this).parent('li').addClass('selected'); 

    // check if mouseup has been triggered 
    // if yes, execute what contained in your old mouseup event handler 
    if (mousedUpFired) { 
    doMouseUp(); 
    } 
    // reset global variable 
    mousedUpFired = false; 
}); 


$(function() { 
    jQuery('.gfield_radio li label').mouseup(function(e){ 
    // set global variable on mouseup and do nothing 
    mousedUpFired = true; 
    }); 
});