I'm having a problem where the my anchor tags sometimes aren't displaying their links. This is happening on Mobile Safari on multiple iPhones, and in the iPhone simulator. I'm using jQtouch r147, PhoneGap, and jQuery 1.4.2. I'm generating the data from a database call, and adding anchor tags to a list like this:
for(var i=0;i<data.rows.length;i++) {
var item = $('<li></li>');
var name = data.rows.item(i).name;
var anchor = $('<a href="#lpage">'+name+'</a>');
item.addClass('arrow');
// This line always displays the name, even when I can't see
// the name in the browser
debug.log('The name: ' + name);
(function(info) {
anchor.bind('tap',
function(e) {
debug.log('Touch start ' + info.id);
});
})(data.rows.item(i));
item.append(anchor);
if( anchor.html() == null ) {
debug.log('html is blank');
}
$('#myUL').append(item);
}
Sometimes my list of names shows fine(http://imagebin.org/101462), and
sometimes it is just blank(http://imagebin.org/101464). When the list
is blank, I see the debug.log() line show me 'html is blank', and I also see the log line show me that the variable 'name' does, in fact, contain a valid name.
When I check for anchor.html() == null, I've also tried to .remove() the anchor tag, and re-create it. But it always comes back without the name displayed.
This happens on the mobile device and in the simulator, but I've never seen it happen in Safari or in Chrome. Has anyone seen something like this? I can't find the cause, and I can't get it to stop. Thank you for any ideas or suggestions!
