動的に作成されたチェックボックスにiCheck（jQueryプラグイン）を適用

Question

私のフォームに自分のチェックボックスのスタイルを設定するには、素晴らしいiCheckプラグインを使用します。

プラグインを使用して、$('input').iCheck()に電話して、希望する外観と機能を適用することができます。

しかし、私は動的に作成されたチェックボックスに.iCheck()関数を呼び出すことに悩まされています。

ajax呼び出しでは、私はsuccess関数で次のようにチェックボックスを作成します。これは$.eachブロックにありますが、わかりやすくするために、私はステートメント内にコードを含めました。 elがすでにDOMツリー内に存在しcontainerとnのidを持つdiv要素である

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

は私のオブジェクトがチェックボックスを構築した後、JSON

として返され、私は特別な何を取得明らか$('#container input').iCheck();を呼び出すが、標準のチェックボックス。私は、チェックボックスが動的に作成され、.iCheck()が呼ばれた後であると推測します。しかし、チェックボックスを作成して.iCheck()と呼んでも結果は同じです。

誰もが私にこれを案内できますか？

Answer 1

はこれを試してみてください...

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

あなたは$('#container input')の長さをチェックしてみましたか？私は確信していませんが、入力はcontainerの直接の子ではないので、セレクタ$('#container input')で見つからないことがあります。

Answer 2

iCheckは、コールバック

を持っているとき、それはバインドの交換（だので、このコードは、AJAXロードされた入力に対して動作しません...この

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

Answer 3

はまた別の状況があります試してみてください） ：

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

委任イベントを代わりに使用する必要があります。

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

Answer 4

まあ、私はいつか前に同様の問題を持っていたし、このようにそれを解決：

el変数は、私は、sが完全にロードel」にプラグインiCheckの初期化を結合しますjQueryの要素があると仮定すると：

AJAXはデータ

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. 
    }); 
}); 

は、あなたのHTML構造の特殊性にコードを適応させることを忘れないでください追加した後、このコードを配置する必要があります。これらの新しく追加された要素のiCheckを初期化するページに要素が追加された直後に上記のコードを実行すると、iCheckコールバックを使用している場合、プラグインはこれらのコールバックを正しく宣言し、適切なタグはFlorinと警告されています。

このコードは

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

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

Answer 5

iCheck最初の初期化の上に配置する必要があり、私はちょうど同じ問題に遭遇し、解決策は単純です：iCheckメソッドを呼び出します。

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

この試してみてください：あなたは、特定のdivから設定したい場合は、この試みる

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

を：下の答えを参照してくださいhttp://icheck.fronteed.com/