Question

我想在单击表单的保存按钮时添加一行，它正在发生，但随后页面刷新本身（为什么？）和新行消失。怎么预防呢？

<button id="saveBtn">Save</button>

$("#saveBtn").click(function(){
    add();
});

function add() {
    var book = {};
    $('form [name]').each(function(){
        book[this.name] = this.value;
    });
    bookList.push(book);
    console.log(bookList);
    localStorage.setItem('bookList', JSON.stringify(bookList));
    showBooks();

}

function showBooks(){
    for (var i=0; i < bookList.length; i++){
        $("#tblData tbody").append("<tr>"+
                                     "  <td>"+bookList[i].author+"</td>" +
                                     "  <td>"+bookList[i].title+"</td>" +
                                     "</tr>");
        }
}

Answer 1

像这样更改您的按钮事件。当点击执行回发时也会执行。通过调用event.preventDefault()，您可以阻止此回发

$("#saveBtn").click(function(event){
event.preventDefault();
    add();
});

本地存储阻止页面重新加载

1 个答案: