Динамически добавлять jquery мобильные компоненты в список с форматированием

Когда я динамически вставляю следующий код, я могу заставить страницу обновиться, чтобы она применила форматирование jQuery для мобильных устройств.
По какой-то причине это не позволяет мне настроить форматирование кнопок. Это действительно странно, потому что он позволяет динамически вставлять список и кнопку, но я не могу отформатировать кнопку, кроме имени.
Его можно манипулировать с помощью CSS, но я хочу использовать jQuery API.Динамически добавлять jquery мобильные компоненты в список с форматированием

$('#cartList').append('<li>' + '<h3>' + game.Title+'</h3>' + '<p>' + '£' + game.Price + '</p>' + '<a href="#cartList" data-role="button" data-icon="none" data-inline="true" onclick="removeItem()">Remove</a>' + '<h3 class="ui-li-aside">' + game.Format + '</h3>' + '</li>').trigger("create");

источник

2012-08-28 user1601634

jQuery Mobile Doc упоминает, что если новые элементы списка будут добавлены в список или удалить из него, разделители не обновляются автоматически, и вы должны вызывать обновление() на ListView перерисовать autodividers.

Попытайтесь добавить: $('#cartList').listview('refresh'); после заполнения списка.

Пример:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 

     <script> 
      $(document).ready(function(){ 
       $("#add-li-button").click(function(){ 
        $('#listList').append("<li data-role=\"collapsible\"> <h3>New List</h3> <div data-role=\"fieldcontain\"></div> </li>").listview("refresh"); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="page"> 
      <ul id="listList" data-role="listview"> 
      </ul> 
      <input type="button" id="add-li-button" value="add a checkbox to list1" /> 
     </div>  
    </body> 
</html>

источник

2012-08-28 20:43:31

У меня есть это в функции вставки, которая позволяет список будет генерироваться правильно для кнопки, за исключением. Это очень странно. Я нашел пример кода, в котором кнопка была вставлена вне списка, и это прекрасно работает, передавая этот код внутри списка, и он приносит ошибки. heres пример http://jsfiddle.net/hbbvM/ – user1601634

Я понял это, поместив кнопку со своим div, похоже, решит это :) – user1601634

Динамически добавлять jquery мобильные компоненты в список с форматированием

ответ

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