डायनेमिक रूप से बनाए गए चेकबॉक्स

Question

पर iCheck (jQuery प्लगइन) लागू करें मैं अपने फॉर्म में अपने चेकबॉक्स को स्टाइल करने के लिए शानदार iCheck प्लगइन का उपयोग करता हूं।

प्लगइन के साथ, मैं इच्छित दिखने और कार्यक्षमता को लागू करने के लिए बस $('input').iCheck() पर कॉल करने में सक्षम हूं।

हालांकि, मैं गतिशील रूप से बनाए गए चेकबॉक्स पर .iCheck() फ़ंक्शन को कॉल करने पर अटक गया हूं।

एक AJAX कॉल में, मैं सफलतापूर्वक कार्य में निम्न प्रकार के चेकबॉक्स बनाते हैं; यह $.each ब्लॉक में है लेकिन सादगी उद्देश्यों के लिए, मैंने केवल कथन के भीतर कोड शामिल किया है।

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

कहाँ elcontainer कि पहले से ही डोम पेड़ में मौजूद है और n की आईडी के साथ एक div है मेरी वस्तु JSON

रूप में वापस आ चेक बॉक्स का निर्माण करने के बाद और मैं $('#container input').iCheck(); स्पष्ट रूप से कहते हैं मैं कुछ खास नहीं मिलता है लेकिन मानक चेकबॉक्स। मुझे लगता है कि ऐसा इसलिए है क्योंकि चेकबॉक्स गतिशील रूप से बनाए जाते हैं और .iCheck() के बाद कहा जाता है। लेकिन चेकबॉक्स बनाने और .iCheck() पर कॉल करने के बाद भी परिणाम वही है।

क्या कोई मुझे इस पर मार्गदर्शन कर सकता है?

Answer 1

इस प्रयास करें ...

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

आप $('#container input') की लंबाई की जाँच करने की कोशिश की है? मुझे यकीन नहीं है लेकिन इनपुट container का प्रत्यक्ष बच्चा नहीं है, इसलिए चयनकर्ता $('#container input') के साथ नहीं मिल सकता है।

Answer 2

प्रयास करें इस

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

Answer 3

इसके अलावा वहाँ एक और स्थिति है ... जब iCheck कॉलबैक

इस कोड, ajax-लोडेड आदानों के लिए काम नहीं करेगा क्योंकि यह बाँध के एक प्रतिस्थापन है है() :

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

सौंपे गए घटनाओं के बजाय इस्तेमाल किया जाना चाहिए:

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

Answer 4

ठीक है, मैं एक ऐसी ही समस्या कुछ समय पहले किया था और इस तरह से इसे हल:

यह मानते हुए कि el चर एक jQuery तत्व मैं, el के पूरी तरह से लोड करने के लिए प्लगइन iCheck के प्रारंभ के लिए बाध्य कर देते हैं ताकि है:

इस कोड 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 चेतावनी दी गई है।iCheck विधि कॉल:

इस कोड को iCheck पहले प्रारंभ

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

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

Answer 5

मैं सिर्फ एक ही समस्या का सामना करना पड़ा और समाधान सरल है पर रखा जाना चाहिए।

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

इस प्रयास करें:

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

आप इस कोशिश विशिष्ट div से सेट करना चाहते हैं:

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

http://icheck.fronteed.com/