移动更改页面错误 - Jquerymobile

Question

我有一个页面，它从外部php文件获取列表后创建一个列表视图。当我单击页面上的一个按钮（会弹出一个对话框），然后关闭对话框时，列表会消失，我该如何修复...

HTML //使用listview的页面     

<div data-role="header" data-position="fixed">
    <h1>Menu</h1>
</div>
<div data-role="content">
    <div data-role="controlgroup" data-mini="true" align="right" data-type="horizontal">
        <a href="#create" data-role="button" data-icon="gear" data-inline="true" data-theme="b" data-rel="dialog">
            Create
        </a>
        <a href="#join" data-role="button" data-icon="plus" data-inline="true" data-theme="b" data-rel="dialog">
            Join
        </a>
    </div>
    <ul data-role="listview" id="ccontent" data-inset="true">

    </ul>
</div>

</div>

HTML //带输入的页面（对话框）

<div data-role="page" id="create">
<div data-role="header">
    <h1>Create</h1>
</div>
<div data-role="content">
    <form id="name" align="left">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" value=""/>
        <input type="submit" value="Submit" data-inline="true">
    </form>


    <div id="result" style="visibility: hidden"></div>
</div>
</div>

JAVASCRIPT //提交输入后

$("#name").submit(function (e) {
e.preventDefault();
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: $("#name").serialize(),
success: function (data) {
$("#result").html(data);
$('#ccontent').listview('refresh');
},
});
});

JAVASCRIPT //从外部来源获取信息以制作列表

function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li><a href="#" data-club-id=\"' + json[i].id + '\" rel="external">' + json[i].name + '</a></li>');
$('#ccontent').listview('refresh');
},
});
}

JAVASCRIPT //调用getclubs

$('#page-tasklist').ready(function() {
    getClubs();
});