Apply iCheck (jQuery plugin) zu dynamisch erstellten CheckBoxes

Question

Ich verwende das fantastische iCheck Plugin, um meine Checkboxen in meinem Formular zu stylen.

Mit dem Plugin kann ich einfach $('input').iCheck() aufrufen, um das gewünschte Aussehen und die Funktionalität anzuwenden.

Allerdings bin ich beim Aufruf der .iCheck() Funktion auf dynamisch erstellten Kontrollkästchen fest.

In einem Ajax-Aufruf baue ich meine Checkboxen wie folgt in der Erfolgsfunktion; Dies ist in einem $.each Block, aber aus Gründen der Einfachheit habe ich nur Code innerhalb der Aussage enthalten.

var chk = $('<div><input id="' + n.ID + '" type="checkbox" name="lblChk"><label for="' + n.ID + '">' + n.Title + '</label></div>'); 
el.append(chk); 

Wo el ist ein div mit der ID von container, die bereits in der DOM-Struktur vorhanden ist und n ist mein Objekt als JSON zurück

Nachdem die Kontrollkästchen bauen, und ich rufe $('#container input').iCheck(); ich natürlich nichts Besonderes bekommen, aber Standard-Kontrollkästchen. Ich nehme an, es ist, weil die Checkboxen dynamisch erstellt werden und nachdem der .iCheck() aufgerufen wird. Aber selbst nachdem ich Checkboxen erstellt habe und .iCheck() aufrufen, ist das Ergebnis dasselbe.

Kann mir jemand dabei helfen?

Answer 1

Try this ...

$('#container').find('input').iCheck(); 

haben Sie versucht Länge von $('#container input') überprüfen? Ich bin mir nicht sicher, aber Eingabe ist nicht das direkte Kind von container, also könnte nicht mit Selektor $('#container input') gefunden werden.

Answer 2

Versuchen Sie, diese

$('#container').iCheck({checkboxClass: 'icheckbox_flat-green',radioClass: 'iradio_flat-green'}); 

Answer 3

Auch gibt eine andere Situation ist ... wenn iCheck Rückrufe hat

Dieser Code wird für die Ajax-geladen Eingänge nicht funktionieren, da es ein Ersatz von bind ist() :

$('#mycheckbox').on('ifChecked', function(event) { 
    alert(); 
}); 

Tragene Ereignisse verwendet stattdessen werden sollten:

$(document).on('ifChecked', '#mycheckbox', function(event) { 
alert('done'); 
}); 

Answer 4

Nun, ich hatte ein ähnliches Problem vor einiger Zeit und löste es wie folgt aus:

Unter der Annahme, dass die el Variable ein jQuery-Element ist, ich werde das Plugin iCheck die Initialisierung des el ‚s voll laden, bindet so:

sollten Dieser Code platziert werden, nachdem AJAX Daten

el.ready(function() { 
    $('#container input').iCheck({ 
    checkboxClass: 'icheckbox_flat-green', 
    radioClass: 'iradio_flat-green' // If you are not using radio don't need this one. 
    }); 
}); 

anhängt Denken Sie daran, den Code an die Besonderheiten Ihres HTML-Struktur anzupassen. Wenn Sie den obigen Code direkt nach dem Anhängen der Elemente an die Seite ausführen, initialisieren Sie das iCheck dieser neu hinzugefügten Elemente. Wenn Sie jedoch die iCheck - Rückrufe verwenden, funktioniert das Plugin nur, wenn Sie diese Rückrufe korrekt deklarieren und die Ereignisse an die .delegieren entsprechende Tags wie Florin gewarnt.

Dieser Code sollte

$(document).on('ifChecked', '#mycheckbox', function() { 
    $(this).addClass('selected'); 
}); 

$(document).on('ifUnchecked', '#mycheckbox', function() { 
    $(this).removeClass('selected'); 
}); 

Answer 5

ich gerade das gleiche Problem gestoßen auf der iCheck ersten Initialisierung gesetzt werden, und die Lösung ist einfach: die iCheck Methode aufrufen.

var id = some_id; 
var one_row = "<tr><td>...<td><td><input type=\"radio\" class=\"minimal\" id=\"" + id + "\" name=\"" + id + "\">radio1</td></tr>"; 
// add this row to HTML 
// call the initialize method 
$('#'+id).iCheck({radioClass: 'iradio_minimal-blue'}); 

Answer 6

Versuchen Sie folgendes:

$('input').iCheck({ 
    checkboxClass: 'icheckbox_flat-blue', 
    radioClass: 'iradio_flat-blue' 
}); 

, wenn Sie von bestimmten div einstellen wollen dies versuchen:

$('#MyDivId input').iCheck({ 
     checkboxClass: 'icheckbox_flat-blue', 
     radioClass: 'iradio_flat-blue' 
}); 

Überprüfen Sie die Dokumentation auf http://icheck.fronteed.com/