jQuery 追加，当我删除记录时视图变秃了

Question

我使用 append

列出了一些值

 <div data-role="main" class="ui-content">

        <h2 id="list-filter">Lista produktów z lodówki</h2>
        <div data-demo-html="true">
            <ul data-role="listview" id="produktList" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">

            </ul>

            <div id="deleteButton"><input type="button" id="merge_button" value="Usuń"></div>
        </div><!--/demo-html -->

    </div>

和JS

 function iterateOverLocalStorage() {
            $('ul#produktList').html("");
            for(var i=0; i < localStorage.length; i++)
            {
                console.log(localStorage.getItem(localStorage.key(i)));
                $('ul#produktList').append("<li class='ui-li-static ui-body-inherit ui-first-child ui-last-child'>"+localStorage.getItem(localStorage.key(i))+"" +
                        "<span><input type='checkbox' id='check' name='produkty[]' value='"+i+"'></span></li>");
            }



        }
        iterateOverLocalStorage();

看起来不错

当我单击 Usuń 按钮时，此操作删除了所选记录

  $("#merge_button").click(function(event){
            event.preventDefault();
            var searchIDs = $("input:checkbox:checked").map(function(){

                return this.value;

            }).toArray(); // <----
            console.log(searchIDs);

            if(searchIDs.length == 0)
            {
                alert('Nic nie zaznaczyles');
            }else {

                for (var k in searchIDs) {
                    console.log("Element: " + k);


                    localStorage.removeItem(localStorage.key(k));
                }

                alert("Usunalem");
                iterateOverLocalStorage();
            }

        });

视图变了，为什么？

Answer 1

这两个视图不同，因为第一个视图中的单选按钮是在文档加载时创建的，而第二个视图中的单选按钮是在稍后阶段创建的。

jQuery 移动版会在页面加载时增强文档，就在您插入初始的一组单选按钮之后。但是，当您在稍后阶段注入 HTML 时，这种增强不会自动发生；相反，您必须请求 jQuery Mobile 应用增强功能，例如使用 enhanceWithin method.

要实现这一点，请更改：

$('ul#produktList').append(
    "<li class='ui-li-static ui-body-inherit ui-first-child ui-last-child'>"
    +localStorage.getItem(localStorage.key(i))+"" +
    "<span><input type='checkbox' id='check' name='produkty[]' value='"
    +i+"'></span></li>");

至：

$("<li class='ui-li-static ui-body-inherit ui-first-child ui-last-child'>"
    +localStorage.getItem(localStorage.key(i)) +
    "<span><input type='checkbox' id='check' name='produkty[]' value='"
    +i+"'></span></li>").appendTo('ul#produktList').enhanceWithin();

此外，虽然不是真的有必要，但我建议在与点击场景相同的条件下添加初始单选按钮，在初始增强阶段之后添加它们。通过这种方式，它们以一致的方式添加，依赖于在这两种情况下使用上述代码触发的增强。

这你可以按如下方式进行。替换这一行（出现在任何函数之外的那一行）：

iterateOverLocalStorage();

有了这个：

$(document).on("pagecreate",function(){ iterateOverLocalStorage(); });

请注意，当 jQuery 移动页面加载或转换时会触发多个事件。看看这张图片：

jQuery 追加，当我删除记录时视图变秃了

jQuery append, when I delete record view has changed baldy

javascript

jquery

jquery-mobile