Как добавить эффекты Jquery Mobile к динамически добавляемым элементам?

Question

Во время работы с Jquery Mobile я столкнулся со странной проблемой. Jquery Mobile добавляет некоторые классы по умолчанию и CSS для каждого элемента на основе роли данных и т. Д., Когда я создаю новые элементы, обычные CSS применяются ко всем новым сгенерированным элементам, но не к Jquery Mobile?

HTML

    <ul data-role="listview" > 
        <li><a href="#">sada</a></li> 
        <li><a href="#">sada</a></li> 
        <li><a href="#">sada</a></li> 
    </ul>
    <a href="#" data-role="button" class="hello" >Add</a>

SCRIPT

$('.hello').click(function(){
      $('ul').append('<li><a href="#">sada</a></li> ');
})

проверьте JsFiddle здесь http://jsfiddle.net/sahil20grover1988/zZMXQ/2/. Нажатие на кнопку создаст новый элемент Li в LIST Как применить функции JQuery Mobile к элементам

Answer 1

вам нужно перезагрузить стиль мобильного списка jquery

после добавления элемента

попробуйте это:

$("ul").listview("refresh");

Answer 2

Вам необходимо использовать живую функцию jQuery для привязки нового действия для вновь добавленного элемента

$('a').live('click',function(){
     //do something
})

и вы можете обновить список таким образом, чтобы получить правильное представление списка, http://jsfiddle.net/zZMXQ/13/

$("ul").listview("refresh");