Adding dynamic content with events in jquerymobile
- by Christian Waidner
Currently I'm stuck with a problem in jquerymobile: I'm adding items to a list dynamically and use enhanceWithin() in the end (so styling is correct).
After this I like to add click-events for each list item but the problem is, that enhanceWithin runs asynchronous and so I always get the error message "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"
When I delay the event-adding-code it works perfectly.
Does anyone have an idea if there is a enhanceWithin.done event or anything else I can use?
HTML:
...
<div id="shoppinglist">Loading list...</div>
...
Javascript:
function updateList()
{
var result = "";
$.each(shoppinglistItems, function (index, item) {
result += '<label><input type="checkbox" ' + item.checked + ' id="item_' + item.id + '">' + item.name + '</label>\n';
});
$('#shoppinglist').html(result).enhanceWithin();
// Change-Events an die Checkboxen knoten
$('input[id*=item_]').unbind('change').bind('change', function (event) {
var itemid = $(this).attr('id');
itemid = (itemid.split('_'))[1]; // Nur die Zahl extrahieren
// Passendes Item aus der Liste der Items suchen und checken
$.each(shoppinglistItems, function (index, item) {
if (item.id == itemid)
{
item.checked = "checked";
item.timestamp = moment().format("YYYYMMDDHHmmss");
}
});
updateList();
});
}
