jquery/jquery-mobile — Issue #3510: The ui-corner-top and ui-corner-bottom are missing after calling listview("refresh")
Author: RickyLin
Created: 2012-01-31 09:49:11+00:00
State: open

I had a listview with data-inset="true" and I appended two
elements programmatically. After calling listview("refresh") method, the listview looked like the following screenshot:

http://www4.chuantu.info/tupianshangchuan/74/1328002300x-1376440148.png

The corners are not rounded any longer.

I figure out that it's because the ui-corner-top and ui-corner-bottom are missing after calling listview("refresh") and the workaround is to add them back:

lv.listview("refresh");
lv.find("li:first").addClass("ui-corner-top");
lv.find("li:last").addClass("ui-corner-bottom");

hence everything looks well:
http://www4.chuantu.info/tupianshangchuan/74/1328003306x-1376440148.png

The code appending
elements is:
$.each(milestones, function (index, milestone)
{
text = $.validator.format("

{0}. {1} - {2}

{3}

", index + 1, milestone.Status, milestone.Time, milestone.Description)
$(text).appendTo(lv);
});