用于删除localstorage项不起作用的jQuery对话框操作

时间:2012-10-28 18:34:22

标签: javascript jquery jquery-ui jquery-mobile

我正在努力获取它,以便当用户单击每个人的“删除记录”时,如果点击确认提示,它实际上会从本地存储中删除单个记录。看来我的本地存储空间很明显,但不能删除个人存储空间。

1 个答案:

答案 0 :(得分:1)

我认为你过于复杂的事件处理程序,为什么使用$(document).delegate('#clearSData', 'click',而不仅仅是#clearData'.click()? 还有,什么是this.key?我认为this是按钮的this,它与存储无关。  一切都在我的样本中正常工作:

http://jsfiddle.net/oceog/7Lawq/3/

HTML:

<button id="delete">Delete</button>
<button id="add">Add</button>
<div id="out"></div>​
​

JS:

var show = function() {
    var out = $('#out'); //.children().remove();
    console.log(out.children());
    out.children().remove();
    out.html('');
    //debugger;
    for (var i in localStorage) {
        var newline = $('<div>').text(i + ':' + localStorage.getItem(i)).data('i', i);
        out.append(newline);
        newline.click(function() {
            var that = $(this);
            var i = that.data('i')
            $('<div>').simpledialog2({
                mode: 'button',
                headerText: 'Warning',
                headerClose: true,
                buttonPrompt: 'Delete Running Record? Cannot be undone!' + '<div>' + i + ':' + localStorage.getItem(i) + '</div>',
                buttons: {
                    'OK': {
                        click: function() {
                            localStorage.removeItem(i);
                            show();
                        }
                    },
                    'Cancel': {
                        click: function() {
                            cancelDialog2(this);
                        },
                        icon: "delete",
                        theme: "b"
                    }
                }
            });

        });
    }
};


$('#add').click(function() {
    var
    key = (Math.random() * 10000000000 + '').replace(/\..*$/, ''),
        value = (Math.random() * 100000000000 + '').replace(/\..*$/, '');
    localStorage.setItem(key, value);
    show();
});
$('#delete').click(function() {
    for (var i in localStorage) {
        localStorage.removeItem(i);
        show();
        break;
    }
});
$('#dialogb').click(function() {
    $('#dialog').dialog();
});
show();

function cancelDialog2(el) {
    var self = el;
    $('<div>').simpledialog2({
        mode: 'blank',
        headerText: 'Info',
        headerClose: true,
        blankContent: "<ul><li>Running records have not been touched.</li></ul>" +
        // NOTE: the use of rel="close" causes this button to close the dialog.
        "<a rel='close' data-role='button' href='#'>Close</a>"
    })
}​

CSS:

  #out div:hover {
 background-color: red;
 color: blue;    
}

<小时/> 因此,将data('key',key)添加到按钮并在对话框按钮单击闭包中使用该数据。