jQuery/Javascript: Ereignis auf einer Checkbox anklicken und das 'geprüft' Attribut

Question

Der Code:

$('input.media-checkbox').live('click', function(e){ 

    e.preventDefault(); 
    var that = $(this); 

    if (that.attr('checked') == 'checked'){ 

     var m = that.attr('media'); 
     var mid = 'verify_' + m; 
     that.parents('div.state-container').find('ul.' + mid).remove(); 
     that.attr('checked', false); 
    } else { 

     var url = AJAX_URL; 

     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function(data){ 

       that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500); 
       that.attr('checked', 'checked'); 
      } 
     }); 
    } 

    return false; 
}); 

ich in Form bin ajaxing, dann das Click-Ereignis in einem anderen Teil auf relevante Kontrollkästchen, um Ajax-Brennen, wenn nötig . Das Formular wird ordnungsgemäß eingefügt und die Klickereignisse werden ausgelöst, indem die zu prüfenden Kontrollkästchen aktiviert und der zweite Ajax ausgelöst wird, da das Attribut checked des Kontrollkästchens ursprünglich false war.

Was meinen Käse gerinnt, ist, wenn ich eine dieser Kisten auschecke. Trotz e.preventDefault() wird das checked-Attribut vor dem Test auf false festgelegt, sodass die if-Anweisung immer die else-Anweisung ausführt. Ich habe es auch mit $.is(':checked') versucht, also bin ich völlig verwirrt.

Es scheint, dass nicht aktiviert -> aktiviert Status liest den ursprünglichen Zustand, aber aktiviert -> nicht aktiviert nicht. Irgendeine Hilfe?

Answer 1

BE, ich weiß, es ist ein Jahr, aber ich denke, dass ich die Lösung gefunden,

Das Problem hier ist, dass das Click-Ereignis tatsächlich das bekommen aufgerufen und ausgeführt wird, bevor die „geprüft“ Eigenschaft wird zur Checkbox-Eingabe hinzugefügt. Die Funktion wird ausgeführt, überprüft, ob die Eingabe das Attribut "checked" aufweist, und führt die else-Bedingung aus. DANN erhält das Element die Eigenschaft "checked".

Ich bin gerade in diese auch gelaufen, und meine Lösung war, die Funktion an die Change-Funktion und nicht an die Klick-Funktion zu binden, da Änderung erst nach dem Aktualisieren der Checked-Eigenschaft auf der Eingabe ausgelöst wird.

Hoffentlich hilft dies Ihnen, und wenn nicht, jemand anderes, der zufällig auf diesen Beitrag stolpert, während ein ähnliches Problem auftritt.

Answer 2

Nun, richtig. Sie haben das live Ereignis eingestellt, so dass ich denke, Ihr Skript reagiert möglicherweise auch auf die Einstellung als überprüft, aber ich kann nicht vollständig sagen, was Sie hier für ohne Markup zu sehen versuchen, aber hier ist meine Neufassung.

$('input.media-checkbox').live('click', function(e){ 

    if ($(this).is(':checked')) { 
     var m = $(this).attr('media'); 
     var mid = 'verify_' + m; 
     $(this).parents('div.state-container') 
      .find('ul.' + mid) 
      .remove(); 
     $(this).attr('checked', false); 
    } else { 
     var url = AJAX_URL; 
     var that = this; 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function(data) { 
       $(that).parents('li') 
        .siblings('li.verification') 
        .children('div.media-verification') 
        .append(data) 
        .fadeIn(500); 
       $(that).attr('checked', true); 
      } 
     }); 
    } 
    return false; 

}); 

Answer 3

Es scheint eine aufgrund von asynchronen Anforderungen zu sein. Die Ausführung geht über $.ajax hinaus, bevor der Rückruf erfolgreich ausgeführt wird. Wenn Sie erneut auf das Kontrollkästchen klicken, wurde der Status noch nicht vom Rückruf der vorherigen Anfrage aktualisiert. Was Sie versuchen können, ist das Kontrollkästchen Kontrolle vor dem Brennen der Ajax-Aufruf zu deaktivieren, und aktivieren Sie es wieder in den Erfolg Rückruf:

that.attr("disabled", "disabled"); 
var url = AJAX_URL; 
$.ajax({ 
    type: 'GET', 
    url: url, 
    dataType: 'html', 
    success: function(data){ 

     that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500); 
     that.attr('checked', 'checked'); 
     that.removeAttr('disabled'); 
    } 
}); 

, dass diese zwei aufeinanderfolgenden Klicks sicherstellen nicht zu unvorhersehbarem Verhalten führen. Der andere Weg wäre die Verwendung einer synchronen Anfrage, d. H. async: false, die jedoch den gesamten Browser für seine Dauer blockiert.

Answer 4

Verwenden Sie e.stopPropagation() anstelle von e.preventDefault() und entfernen Sie auch return false. Die Rückgabe von false in jQuery entspricht e.stopPropagation() + e.preventDefault(). e.preventDefault() verhindert, dass das Kontrollkästchen checked ist.

Answer 5

Ich denke, es liegt an einem seltsamen Bug im IE. Überprüfen/setzen Attribut defaultChecked zusammen mit überprüft. Versuchen Sie dies in Ihrer, wenn die Bedingung,

if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){  
     var m = that.attr('media'); 
     var mid = 'verify_' + m; 
     that.parents('div.state-container').find('ul.' + mid).remove(); 
     that.attr('checked', false); 
     that.attr('defaultChecked', false); 
} else { 

Answer 6

Dies ist wahrscheinlich nur eine Teilantwort, aber in Ihrem Test, $(this).attr('checked') sollte true zurück, wenn geprüft und false, wenn nicht. So ändern Sie einfach Ihre Bedingung zu if (that.attr('checked'))