JQUERY Mobile: динамический список добавок не работает

Im new для JQuery Mobile, и у меня есть некоторые проблемы со следующим.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>

Большое спасибо за вашу помощь!

С уважением, Виктор

источник

2015-03-23 Victor

Вы используете кнопку отправки, следовательно, образуют получение представления и перезагрузки страницы. Это приводит к обновлению вашей страницы.

Изменить тип кнопки 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>

источник

2015-03-23 08:44:19

спасибо, что действительно помогает часть проблема :) Сайт больше не освежает, спасибо!

Он дважды добавляет элементы в список. Ты знаешь почему? – Victor

Что происходит, когда вы удаляете '$ (" # personenLijst "). Listview (" refresh ");', вы пробовали это? –

JQUERY Mobile: динамический список добавок не работает

ответ

Смежные вопросы