Ereignis wird nur ausgelöst, wenn zweimal ausgelöst

Question

Ich weiß nicht warum, aber das erste Mal, wenn ich auf das Ereignisziel klicke, wird es nicht wirksam, Sie müssen zweimal auf das Ereignisziel klicken, aber das Ergebnis ist Gegenteil. Betrachten wir dieses Experiment, dass ich erstellt Checkbox:

$('.label-button').on('click', checkboxStatus); 
 

 
function checkboxStatus(e) { 
 
    var $evt = $(e.target); 
 

 
    if($evt.next().is(':checked')) { 
 
    $('.message').find('.status').text('checked'); 
 
    } else { 
 
    $('.message').find('.status').text('not checked'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label> 
 

 
<input type="checkbox" id="cbox" /> 
 

 
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

Das erste Mal, wenn Sie auf die Schaltfläche klicken, die .status sagt, es ist immer noch „nicht geprüft“, obwohl das Kontrollkästchen tatsächlich aktiviert ist. Wenn Sie das zweite Mal auf den Button klicken, werden die Änderungen angezeigt, aber das Gegenteil. Das Kontrollkästchen ist markiert, aber der Status ist "nicht aktiviert"; Das Kontrollkästchen ist deaktiviert, aber der Status ist "aktiviert". Ich habe versucht, e.stopPropagation() hinzuzufügen, aber es hat nicht funktioniert.

Wie kann ich das richtig machen?

Answer 1

Zu dem Zeitpunkt wird Click-Ereignis auf Etikett aufgerufen, input Zustand wird nicht geändert, daher beobachten Sie solche Inkonsistenz.

Bindung change Ereignis auf dem input Element statt click Ereignis auf der label!

$('#cbox').on('change', checkboxStatus); 
 

 
function checkboxStatus() { 
 
    $('.message').find('.status').text(this.checked ? 'checked' : 'not checked'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label> 
 

 
<input type="checkbox" id="cbox" /> 
 

 
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

Answer 2

1. Ändern Sie die Veranstaltung mit change statt click.
2. Und das Änderungsereignis mit auf nicht Etikett
3. schließlich die Überprüfung gelten ändern, wenn die Bedingung wie diese $evt.is(':checked')

$('#cbox').on('change', checkboxStatus); 
 

 
function checkboxStatus(e) { 
 
    var $evt = $(e.target); 
 

 
    if($evt.is(':checked')) { 
 
    $('.message').find('.status').text('checked'); 
 
    } else { 
 
    $('.message').find('.status').text('not checked'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label> 
 

 
<input type="checkbox" id="cbox" /> 
 

 
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

Answer 3

$(function(){ 
 
    $('.label-button').on('click', checkboxStatus); 
 

 
    function checkboxStatus(e) { 
 
    var $evt = $(e.target).next(); 
 
    
 
    if($evt.prop('checked')) { 
 
     $('.message').find('.status').text('not checked'); 
 
    } else { 
 
     $('.message').find('.status').text('checked'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label> 
 

 
<input type="checkbox" id="cbox" /> 
 

 
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>