jquery - 本地存储防止页面重新加载

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

<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>");
        }
}

最佳答案

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

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

关于jquery - 本地存储防止页面重新加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28982782/