2013-11-15 5 views
1

У меня возникла проблема с созданием текстового поля с использованием jquery, который реализован в webview. вот кодtextbox style после jquery mobile

<html> 

<head> 
    <title>jQuery Mobile List Demo</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> 
    <script type="text/javascript"> 
     var counter = 1; 
     $('#AddQuestion').live('pagecreate', function() { 
      $('#button').click(function() { 
       $('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>"); 
       $('#TextBoxesGroup').textinput(); 
       if (counter > 4) { 
        document.getElementById("button").style.display = 'none'; 
       } 
       counter++; 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <div data-role="page" id="AddQuestion"> 
     <div data-role="header" data-position="fixed"> 
       <h1>AddQuestion</h1> 
     </div> 
     <div data-role="content"> 
      <form name="newdocument"> 
       <div data-role="listview" id="TextBoxesGroup"></div> 
       <input type="button" value="Add Option" id="button"> 
      </form> 
     </div> 
    </div> 
</body> 
</html> 

я попробовал этот код в jsfiddle и когда я нажмите кнопку Добавить вариант он показывает unstyle текстового поля. в чем проблема?

+0

Можете ли вы соединить свой jsfiddle? – xdumaine

ответ

1

Вам необходимо активировать создание на странице, чтобы jQuery mobile применял дополнительную разметку и классы, необходимые для стилизации.

<script type="text/javascript"> 
    var counter = 1; 
    $('#AddQuestion').live('pagecreate', function() { 
     $('#button').click(function() { 
      $('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>"); 
      $('#TextBoxesGroup').textinput(); 
      if (counter > 4) { 
       document.getElementById("button").style.display = 'none'; 
      } 
      $('#AddQuestion').trigger('create'); 
      counter++; 
     }); 
    }); 
</script> 
+1

он работает уже. я отвечу на ваш ответ через 7 мин. я застрял в этой проблеме более 2 часов. Спасибо приятель! – user2779065

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