0

我试图在列表视图中的列表项之前获得一个复选框。当我单击“编辑”按钮时，我有一个带有列表视图的页面。列表视图在列表项之前添加复选框，但是当我单击复选框时，页面会自动更改为上一个视图（列表视图中没有复选框）。未选中复选框。我做错了。

$('#fav').on('click', function() {
    $("#favoritesList").listview('refresh');
    fromStorage();

    $(document).on('click', '#empty', function() {
        $("#favoritesList").empty();
        localStorage.clear();
        $("#favoritesList").listview('refresh');
    });


    $(document).on('click', '#edit', 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><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() {
            if ($("#select").is(':checked')) {
                $("#check").prop("checked", true);
            }
            else {
                $("#check").prop("checked", false);
            }

            $("#favoritesList").listview('refresh');
}
4

1 回答 1

1

正如 Thirumalai 所说，提供 jsfiddle 会有很大帮助。

我认为您的问题可能是事件冒泡与 jquery mobile 的工作方式相结合。jQuery mobile 可能会处理列表视图，当它在其中找到时<a>，它会自动将其视为项目的“链接部分”。当您单击复选框时，除了选中的复选框外，还会调用更高级别的单击处理程序。

我会尝试将单击处理程序分配给复选框并停止事件的冒泡（http://api.jquery.com/event.stopPropagation/），因此它不会冒泡到更高级别并且不会打开链接。

$("#check").click(function(event){
    event.stopPropagation();
});

如果您不需要坚持使用您的代码，我建议您以与本文类似的方式构建 html：

ListView 中的复选框与 Jquery mobile

还有jsfiddles。

祝你好运。

于 2013-07-22T15:03:36.430 回答