javascript - ローカルストレージアイテムを削除するjQueryダイアログアクションが機能しない

Question

ユーザーが各個人の[レコードの削除]をクリックして確認プロンプトを押すと、実際にローカルストレージから個々のレコードが削除されるように取得しようとしています。私の明確なローカルストレージは機能しているように見えますが、個々のストレージを削除することはできません。

Answer 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)ボタンに追加し、ダイアログボタンのクリッククロージャ内でそのデータを使用します。