如何使用 jquery 删除 listivew 中的选中项？

Question

我正在动态创建一个用于存储数据的列表视图。当我单击按钮时，列表视图会附加复选框。当我在列表视图中选择项目的单个复选框时，必须从列表视图中删除特定的列表项目。但是当我尝试删除特定项目时，并没有删除。

$('#add #input[name="check"]:checkbox').change(function () {
    var chkLength = $('input[name="check"]:checkbox').length;
    var chkdLength = $('input[name="check"]:checkbox:checked').length;
    if (chkLength == chkdLength) {
        $('#select').attr('checked', true);
        //$('#empty').on('click', function() {
        $('#add input[name="check"]:checkbox:checked').on('click', function () {
            $('#empty').on('click', function () {
                localStorage.removeItem($(this).attr('url'));
                $("#favoritesList").listview('refresh');
            });
        });
    } else {
        $('#select').attr('checked', false);
    }
});

更新：

我正在创建动态列表视图和复选框。

$('#edit').live('click', function () {
    fromGetStorage();
});

function fromGetStorage() {

    $("#favoritesList").empty();
    $(".ui-listview-filter").remove();
    $("#favoritesList").append('<input type="checkbox" name="all" id="select" />Select all</br>');
    for (var i = 0; i < localStorage.length; i++) {
        var url = localStorage.key(i);
        var demo = localStorage.getItem(url);
        $("#favoritesList").append('<li id="add"><div><input type="checkbox" name="check" id="check">&nbsp;<a href="' + url + '" style="text-decoration:none;color:black">' + demo + '</a></div></li>').attr('url', url);
        $("#favoritesList").listview('refresh');
    }

    $("#select").click(function (event) {
        event.stopPropagation();
    });
    $('#select').change(function () {
        if ($("#select").is(':checked')) {
            $("#add #check").prop("checked", true);
            $('#empty').on('click', function () {
                localStorage.clear();
                $("#favoritesList").listview('refresh');
            });
        } else {
            $("#add #check").prop("checked", false);
        }
    });
    $("#add #check").click(function (event) {
        event.stopPropagation();
    });
    $('#add #input[type="checkbox"]').change(function () {
        var chkLength = $('input[type="checkbox"]').length;
        var chkdLength = $('input[type="checkbox"]:checked').length;
        var item = $(this);
        var content = $(item).text();
        if (chkLength == chkdLength) {
            $('#select').attr('checked', true);
            if (item.is(':checked')) {
                $("#delete").click(function () {
                    $('#' + content).remove();
                    $("#favoritesList").listview('refresh');
                });
            }

        } else {
            $('#select').attr('checked', false);
        }
    });


}

提前致谢。

Answer 1

解决方案

你的函数中的这段代码：

$("#delete").click(function () {
    $('#' + content).remove();
    $("#favoritesList").listview('refresh');
});

没有必要。 （我想）。您的代码非常不清楚它试图实现的目标。 除非你在jsfiddle.net 上用小提琴解释你想要实现的目标，否则可能很难解决这个问题。但对于初学者，您可能想要这样做：

 $('#add #input[type="checkbox"]').change(function () {
        var chkLength = $('input[type="checkbox"]').length;
        var chkdLength = $('input[type="checkbox"]:checked').length;
        var item = $(this);
        var content = $(item).text();
        if (chkLength === chkdLength) {
            $('#select').attr('checked', true);
            if (item.is(':checked')) {
                item.closest("li").remove(); //remove delete click initialisation
            }

        } else {
            $('#select').attr('checked', false);
        }
    });

要格式化您的代码，请使用以下方法之一来创建列表视图。如果你问我这就是问题所在。

简单的方法 - 使用控制组创建复选框列表

首先，使用 listview 创建复选框列表是完全错误的。您必须为此使用控制组而不是列表视图。原因是因为调整列表视图以容纳 checkbox 将涉及大量 CSS 工作。控制组提供了更多功能，并且在处理事件时更加简洁。

1. 演示：http://jsfiddle.net/hungerpain/V8jda/8/
2. 更风格化的演示：http://jsfiddle.net/hungerpain/V8jda/

艰难的方法——使用列表视图创建复选框列表

如果您仍然坚持使用列表视图，这里有一个例子。您可以将一个名为 container 的类添加到 li 并设置如下样式：

.container {
    padding : 0 !important;
    border-width : 0 !important;
}
.container label {
    margin : 0;
}

那么，<li/> 中的内容必须是这样的：

<li class="container">
   <input type="checkbox" name="checkbox-0a" id="checkbox-0a" data-theme="c">
   <label data-corners="false" for="checkbox-0a">Sweet Child 'O Mine </label> 
</li>

您必须使用来自localStorage 的数组填充此模板。尝试在您的父页面的pageinit 事件中创建您的列表视图，如下所示：

$(document).on("pageinit", "#mypage", function () {
    var $page = $(this);
    //assuming this comes from localStorage
    var songs = ["Sweet Child 'O Mine", "Summer of '69", "Smoke in the Water", "Enter Sandman", "I thought I've seen everything"];

    //array of li - empty
    var li = [];

    $.each(songs, function (i, song) {
        //the variable you'll be using for input - label relationship
        var idForName = "checkbox-" + i + "a";
        //create cbox HTML
        var cbox = '<li class="container"><input type="checkbox" name="' + idForName + '" id="' + idForName + '" data-theme="c"/><label data-corners="false" for="' + idForName + '" >' + songs[i] + ' </label> </fieldset></li>';
        //add it to li[] array
        li.push(cbox);
    });
    //cache ul for later use
    var $ul = $("#songlist");
    //append the li to ul
    $ul.html(li)
    //refresh listview
    $ul.listview("refresh");
    //refresh the checkbox etc
    $ul.trigger("create");
});

并且更改事件必须如下所示（这也必须在 pageinit 事件中）

//change event on input:checked (will fire only when check box is checked)
$ul.on("change", "input[type=checkbox]:checked", function () {
   //call our slideRight function on .container class
   $(this).closest("li").remove();
   //refresh 
   $ul.listview("refresh").trigger("create");
});

1. 演示：http://jsfiddle.net/hungerpain/SYA3y/6/
2. 更风格化的演示：http://jsfiddle.net/hungerpain/SYA3y/