JQUERY Mobile:动态附加列表不工作
我是jquerymobile的新手，我对以下方面有一些问题 我尝试构建的是： -有一个按钮。当我点击按钮时，将显示一个弹出窗口 -在弹出窗口中，您可以通过按下按钮输入一些输入并提交。 -之后，输入的内容应添加到列表中。 发生的情况如下： -当您按下按钮时，将显示弹出窗口 -您可以在输入中输入值并提交。这正如预期的那样有效。 -之后，我看到值被添加到列表中两次，然后页面刷新，项目从列表中消失。 -在我使用该按钮显示弹出框后，该按钮不再工作。 因此，我有以下问题： -为什么要在列表中添加两次输入？ -为什么我的页面会刷新并删除刚刚添加的列表项？ -为什么我的按钮在我用了一次后就坏了？ 我在网上读了很多小时，也尝试了很多，但我不知道我做错了什么。 在此，守则：JQUERY Mobile:动态附加列表不工作,jquery,list,mobile,dynamic,popup,Jquery,List,Mobile,Dynamic,Popup,我是jquerymobile的新手，我对以下方面有一些问题 我尝试构建的是： -有一个按钮。当我点击按钮时，将显示一个弹出窗口 -在弹出窗口中，您可以通过按下按钮输入一些输入并提交。 -之后，输入的内容应添加到列表中。 发生的情况如下： -当您按下按钮时，将显示弹出窗口 -您可以在输入中输入值并提交。这正如预期的那样有效。 -之后，我看到值被添加到列表中两次，然后页面刷新，项目从列表中消失。 -在我使用该按钮显示弹出框后，该按钮不再工作。 因此，我有以下问题： -为什么要在列表中添加两次输入？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Test App</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!-- Home screen icon Mathias Bynens http://goo.gl/6nVq0 -->
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="apple-touch-icon.png">
</head>
<body>
<div id="home" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
<h1>Test App</h1>
</div>
<div data-role="content" data-theme="b">
<ul id="personenLijst" data-role="listview" data-inset="true" data-divider-theme="b">
<li data-role="list-divider">Personenlijst</li>
</ul>
<div align="center">
<a href="#popupLogin" data-role="button" data-icon="plus" data-inline="true" data-transition="pop" data-position-to="window" data-rel="popup" data-mini="true" data-theme="b">Persoon Toevoegen</a>
</div>
<div id="popupMenu" data-role="popup" data-theme="a">
<div id="popupLogin" class="ui-corner-all" data-role="popup" data-theme="a">
<form>
<div style="padding: 10px 20px;">
<h3>Voer persoonsnaam in</h3>
<label class="ui-hidden-accessible" for="persoon">Persoon:</label>
<input id="persoon" name="persoon" value="" type="text" data-theme="a" placeholder="persoon">
<button type="submit" id="submit" data-theme="b" data-icon="check">Persoon Toevoegen</button>
</div>
</form>
<script>
$("#submit").on("click", function () {
list = '<li>' + $("#persoon").val() + '</li>';
$("#personenLijst").append(list);
window.setTimeout(function(){ $("#personenLijst").listview("refresh"); },300);
//$("#personenLijst").selectmenu('refresh');
});
</script>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<a href="index.html" data-role="button" data-iconpos="notext" data-icon="info"></a>
</div>
</div>
</body>
</html>
Victor您正在使用提交按钮，因此表单将被提交并重新加载页面。这将导致页面刷新 将按钮类型更改为类型=按钮
谢谢，这确实帮助了问题的一部分：网站不再刷新了，谢谢！它会将项目添加到列表中两次。你知道为什么吗？当你删除$personenLijst.listviewrefresh；，会发生什么；，你试过了吗？
<button type="button" id="submit" data-theme="b" data-icon="check">
Persoon Toevoegen
</button>
<script>
$(document).ready(function(){
$("#submit").on("click", function () {
list = '<li>' + $("#persoon").val() + '</li>';
$("#personenLijst").append(list);
window.setTimeout(function(){ $("#personenLijst").listview("refresh");
},300);
//$("#personenLijst").selectmenu('refresh');
});
});
</script>