如何为动态添加的元素添加Jquery Mobile效果？

Question

在使用Jquery Mobile时，我遇到了一个奇怪的问题。根据data-role等属性，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>

脚本

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

在这里检查JsFiddle http://jsfiddle.net/sahil20grover1988/zZMXQ/2/。点击按钮将在LIST中创建新的Li元素。如何将JQuery Mobile功能应用于元素

- Sahil Grover

---

在我看来，jQuery 部分似乎是在文档加载时应用了一些样式，但在添加新项时未重新应用。我会尝试找出如何生成所需的 <li> 元素，而不仅仅是追加 html 内容，很有可能存在特定的 jQuery Mobile 函数可以实现此目的，并保留样式。 - dougajmcdonald

Answer 1

在添加元素后，您需要重新加载jQuery移动列表样式。

尝试以下操作：

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

- Sander

Answer 2

你需要使用jQuery的live函数来为新添加的元素绑定新的动作。

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

您可以像这样刷新列表，以使列表视图正确， http://jsfiddle.net/zZMXQ/13/

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

- Jayantha Lal Sirisena

---

你读了他的问题吗？你看到他的 jsfiddle 了吗？它与 live 没有任何关系。 - genesis

你缺少按钮点击事件。 - Jayantha Lal Sirisena

@Jayantha，请再检查一下你的fiddle - 33无法工作.....无论如何，我已经实现了这个问题，但如果我想刷新整个内容块，那该怎么办？ - Sahil Grover

它无法从 fiddle 中调用您的 URL（请查看 firebug 中 URL 的情况），因此它无法正常工作。它应该在您的本地机器上运行。 - Jayantha Lal Sirisena