JQM (jQueryMobile) 动态删除元素答案

【问题标题】：JQM (jQueryMobile) Dynamically removing elementsJQM (jQueryMobile) 动态删除元素
【发布时间】：2011-07-20 12:40:58
【问题描述】：

这是this question 的第 2 部分（好吧，也许是第 3 部分）

这是一个工作示例：http://jsfiddle.net/UcrD8/63/ 这是较早的尝试，正如您在选择第一个选项时看到的那样：http://jsfiddle.net/UcrD8/4/ 但是使用 JQM 它使用它作为选项的标签并且它是不可选择的

添加新选择选项的功能正在运行，但如果我想删除选定的选项，这不起作用。

更新：

我确实注意到 select 元素已被删除，但 jQM 添加的语法仍在显示：

<div class="ui-select">
    <div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">Remove Selected Option</span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">
            </span>
        </span>
    </div>
</div>

也需要删除它

【问题讨论】：

标签： jquery html css dynamic jquery-mobile

【解决方案1】：

嗯，因为 jQM 已经更新了好几次，我能够得到这个工作

http://jsfiddle.net/6fFLb/7/

【讨论】：

在这个答案中，您没有删除选择选项。我正在寻找确切的功能，但在 jQM 上还没有成功。

【解决方案2】：

我见过很多动态片段的问题。

例如，如果我在通过 $.mobile.changePage() 加载页面后创建的页面元素应该是 jquery-mobilied-ified（数据角色和所有这些），它们不会成为 jquery-mobile -ified 并且在任何地方都没有“再次解析我的页面，jquery”方法。我已经在 jquery 移动团队中记录了一个这样的错误，但我们会看到他们什么时候解决它。可以自己做。

【讨论】：

有一个函数，它被称为.page - jquerymobiledictionary.dyndns.org/faq.html
可能是最近添加的？一个月前我使用它时它不存在，此后又发布了一个新版本。我不相信我在更改日志中看到过它。我记录的错误被接受为严重错误，所以我无法想象我只是错过了一些东西。
我还没有让 .page() 工作。我见过各种声称 .page() 刷新样式的说法，但即使在非常简单的测试用例中，我也无法让它刷新 jqm 样式。

【解决方案3】：

当我必须删除/隐藏一个项目时，我通常将项目包装在一个 div 中，然后隐藏该 div。不过，我不知道这对这种情况有多大帮助。

【讨论】：

我认为这与我的问题无关，因为我试图删除列表项元素并刷新 jQM。我有一段时间没有测试过这个问题，但是您将元素放在 div 中的建议不起作用。我通常会对此投反对票，因为我认为它更像是评论而不是解决方案，但是由于您是 SO 新手，请考虑使用解决方案而不是建议来编辑您的回复

【解决方案4】：

<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
  <script src=jquery.js></script>
  <script src=jquery.mobile/jquery.mobile.js></script>
</head> 

<body> 

<div data-role=page id=home>
  <div data-role=header>
    <h1>Home</h1>
  </div>

  <div data-role=content>
    <p> Window content </p>  
    <ul data-role=listview data-inset=true>
      <li data-icon=delete> <a href=#>Element 1 </a></li>
      <li data-icon=delete> <a href=#>Element 2 </a></li>
      <li data-icon=delete> <a href=#>Element 3 </a></li>
      <li data-icon=delete> <a href=#>Element 4 </a></li>
      <li data-icon=delete> <a href=#>Element 5 </a></li>
    </ul>
  </div>
</div>

</body>
</html>

<script>

$("li .ui-icon").bind ("click", function (event)
{
  $(this).closest ("li").remove ();
});

</script>

【讨论】：