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 Mobile在插入初始单选按钮后立即在页面加载时增强文档。但是，当您在稍后阶段注入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 Mobile页面加载或转换时会触发多个事件。看看这个图像：

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

1 个答案: