javascript - 用于删除本地存储项的 jQuery 对话框操作不起作用

Question

我正在尝试获取它，以便当用户为每个人单击删除记录并点击确认提示时，它实际上会从本地存储中删除单个记录。看来我的明确本地存储一个有效，但不是删除个人一个。

Answer 1

我认为您过于复杂的事件处理程序，为什么使用$(document).delegate('#clearSData', 'click',而不是 just #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)到按钮并在对话框按钮单击关闭中使用该数据。