Question

我是Jquery Mobile的新手，我在以下方面遇到了一些问题。

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

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

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

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

代码如下：

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

非常感谢你的帮助！

的问候，维克多

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

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

1 个答案: