Question

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

$('#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');
}

Answer 1

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

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

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

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

如果您不需要坚持使用代码，我建议您使用与此帖相似的方式构建html：

Checkbox in ListView with Jquery mobile

还有jsfiddles。

祝你好运。

单击按钮时未选中复选框

1 个答案: