Geek Answers Handbook

The "checked" checkbox attribute is not activated if html is created dynamically

I created a list containing a checkbox. On some list items, I needed to check the box. The list is created dynamically as the content comes from the server.

I have the following jsfiddle code. http://jsfiddle.net/praleedsuvarna/rN28z/

Could you help me solve this problem? thanks in advance

below is an example of my dynamic list contents where the 2nd and 3rd checkboxes are checked

$(document).on('pageshow', '#index', function(){ var list = '<li>'+ ' <div class="checkBoxLeft">'+ ' <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>'+ ' </div> '+ ' <a href="item1.html" class="detailListText">item1</a>'+ '</li>'+ '<li>'+ ' <div class="checkBoxLeft">'+ ' <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>'+ ' </div>'+ ' <a href="item1.html" class="detailListText">item2</a>'+ '</li>'+ '<li>'+ ' <div class="checkBoxLeft">'+ ' <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>'+ ' </div> '+ ' <a href="item1.html" class="detailListText">item3</a>'+ '</li>' $("#viewdata").html(list); $("#viewdata").listview("refresh"); });

below is my html page

 <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> First Page </h3> <a href="#second" class="ui-btn-right">Next</a> </div> <div data-role="content"> <ul data-role="listview" data-theme="a" id="viewdata"> </ul> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body>
+4
source share
1 answer

Fixed and slightly fixed version: http://jsfiddle.net/rN28z/6/

I moved this code:

 $('input[type="checkbox"]').each(function() { $(this).parent('.checkBoxLeft').addClass(this.checked ? 'checked' : 'not-checked'); });

inside the pageshow handler. You called it on pagebeforeshow , and by that time your HTML has not yet been populated.

+3
source

More articles:


All Articles