我正在动态地创建用于存储数据的列表视图。当我点击按钮时，列表视图会附加复选框。当我在列表视图中选择项目的各个复选框时，必须从列表视图中删除特定列表项目。但是当我试图删除特定项目时没有删除。
$('#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);
}
});
更新：
我正在创建listview和复选框的everthing dynamic。
$('#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"> <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);
}
});
}
先谢谢。
答案 0 :(得分：0)
你的函数中的这段代码：
$("#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创建复选框列表是完全错误的。您必须使用控制组而不是listview。原因是因为调整listview以容纳checkbox将会激活很多CSS工作。控制组提供更多功能，在处理事件时更加清晰。
如果你仍然坚持使用listview，这是一个例子。您可以将一个名为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");
});