JQUERY Mobile：动态附加列表不起作用答案

【问题标题】：JQUERY Mobile: Dynamic append list not workingJQUERY Mobile：动态附加列表不起作用
【发布时间】：2015-03-23 17:00:48
【问题描述】：

我是 Jquery Mobile 的新手，遇到以下问题。

我尝试构建的是：
- 有一个按钮。当我单击按钮时，将显示一个弹出窗口
- 在弹出窗口中，您可以输入一些输入内容并按下按钮提交。
- 之后，应将输入的内容添加到列表中。

会发生以下情况：
- 当您按下按钮时，会显示弹出窗口
- 您可以在输入中输入一个值并提交。这按预期工作。
- 之后我看到该值被添加到列表中两次，然后页面刷新并且项目从列表中消失。
- 在我使用按钮显示弹出框后，该按钮不再起作用。

所以我有以下问题：
- 为什么输入两次添加到列表中？
- 为什么我的页面刷新并删除了刚刚添加的列表项？
- 为什么我的按钮在我使用 1 次时不起作用？

我在互联网上阅读了很多小时并尝试了很多，但我不知道我做错了什么。

特此代码：

    <!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>

非常感谢您的帮助！

问候，维克多

【问题讨论】：

标签： jquery list mobile dynamic popup

【解决方案1】：

您正在使用提交按钮，因此表单被提交并重新加载页面。这会导致您的页面刷新。

将按钮类型更改为type="button"

<button type="button" id="submit" data-theme="b" data-icon="check">
  Persoon Toevoegen
</button>

将您的脚本保存在document.ready 中，这将确保在分配任何事件处理程序之前所有 DOM 结构都准备好

<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>

【讨论】：

谢谢，这确实有助于解决部分问题 :) 该网站不再刷新，谢谢！

它确实将项目两次添加到列表中。你知道为什么吗？
删除$("#personenLijst").listview("refresh");后会发生什么，你试过吗？