HTML Checkbox dynamically appended to list with JavaScript not working
I havent been using jquery, javascript and HTML to to create a list a
products and the task I am attempting to do now is to be able to select
multiples from a list.
So far what is working is I have a HTML list and I can dynamically add
through javascript the
required for each in the list. The problem is, the checkboxes are not
checking at all. The even stranger thing is if I click on a checkbox
multiple times very fast, it will check. Another feature I wish to add
once the checkboxes are working is if a list item is clicked on, it
automatically checks the checkbox related to that list. Would anyone mind
helping me with these issues? Thank you and here is my code:
HTML
<!DOCTYPE html>
<head>
<title></title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"
/>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"
type="text/javascript" charset="utf-8"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!--Progress Bar Scripts-->
</head>
<body>
<div data-role="page" id="searchProducts" data-theme="b">
<div data-role="header" data-position="inline"> <a onclick=""
data-icon="back">Back</a>
<h1>Search Products</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="name">Product:</label>
<form action="javascript:searchProducts('denim')">
<input type="search" name="searchboxProd"
id="searchboxProd" value="denim" />
<!--<a href="#" data-role="button" style="width:
200px">Search</a>-->
</form>
<ul id="ProductsFound" data-role="listview"
data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Products Found</li>
</ul>
</div>
<div id="prodList"></div>
</div>
</div>
</body>
JavaScript
function searchProducts(prod) {
for (var i = 1; i < 6; i++) {
$('#ProductsFound').append($('<li/>').append($('<a/>', {
//'href': '#prod',
//'onclick': 'selectProduct(' + i + ') ',
}).append($('<fieldset/>', {
'data-role': 'controlgroup'
}).append($('<input/>', {
'type': 'checkbox',
'id': 'checkbox-2b',
'data-theme': 'c',
'onclick': 'checked=true'
})).append($('<label/>', {
'for': 'checkbox-2b'
}).append($('<label/>', {
'text': ' Denim ' + i
}))))));
}
$('#ProductsFound').listview('refresh');
}
No comments:
Post a Comment