Áp dụng iCheck (plugin jQuery) để tạo các Hộp kiểm được tạo động

Question

Tôi sử dụng plugin iCheck tuyệt vời để tạo kiểu cho các hộp kiểm của tôi trong biểu mẫu của tôi.

Với plugin, tôi có thể chỉ cần gọi $('input').iCheck() để áp dụng giao diện và chức năng mong muốn.

Tuy nhiên, tôi bị kẹt khi gọi hàm .iCheck() trên hộp kiểm được tạo động.

Trong cuộc gọi ajax, tôi tạo các hộp kiểm của mình như sau trong hàm thành công; Đây là một khối $.each nhưng vì mục đích đơn giản, tôi chỉ bao gồm mã trong câu lệnh.

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

đâu el là một div với id của container đó đã tồn tại trong cây DOM và n là đối tượng của tôi trở lại như JSON

Sau khi xây dựng các hộp kiểm và tôi gọi $('#container input').iCheck(); rõ ràng tôi nhận được có gì đặc biệt nhưng hộp kiểm chuẩn. Tôi đoán đó là vì các hộp kiểm được tạo động và sau khi gọi số .iCheck(). Nhưng ngay cả sau khi tôi tạo hộp kiểm và gọi số .iCheck() kết quả cũng giống nhau.

Có ai có thể hướng dẫn tôi về điều này không?

Answer 1

Hãy thử này ...

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

bạn đã thử kiểm tra chiều dài của $('#container input')? Tôi không chắc chắn nhưng đầu vào không phải là con trực tiếp của container vì vậy có thể không được tìm thấy với công cụ chọn $('#container input').

Answer 2

Hãy thử điều này

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

Answer 3

Cũng có tình huống khác ... khi iCheck có Callback

Mã này sẽ không làm việc cho các đầu vào ajax-nạp, vì đó là một sự thay thế của bind() :

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

sự kiện được ủy nên được sử dụng thay vì:

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

Answer 4

Vâng, tôi đã có một vấn đề tương tự lúc nào trước và giải quyết nó như thế này:

Giả sử rằng biến el là một yếu tố jQuery tôi sẽ ràng buộc khởi plugin iCheck để các el 's đầy đủ tải, vì vậy:

mã này phải được đặt sau AJAX gắn thêm dữ liệu

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

Hãy nhớ để sửa lại mã với đặc thù của cấu trúc HTML của bạn. Chạy mã trên ngay sau khi các phần tử được thêm vào trang bạn đang khởi tạo iCheck của các phần tử mới được thêm vào này, tuy nhiên nếu bạn đang sử dụng lệnh gọi lại iCheck, plugin sẽ chỉ hoạt động nếu bạn khai báo các cuộc gọi lại một cách chính xác, ủy quyền các sự kiện cho các thẻ thích hợp giống như cảnh báo Florin.

Mã này sẽ được đặt trên iCheck khởi đầu

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

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

Answer 5

Tôi chỉ gặp phải cùng một vấn đề và giải pháp rất đơn giản: gọi phương thức 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

Hãy thử điều này:

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

nếu bạn muốn thiết lập từ div cụ thử này:

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

Kiểm tra các tài liệu trên http://icheck.fronteed.com/