jquery - 防止从 jQuery Mobile 的提交按钮刷新页面

Question

我是一个完全的编程新手，完全不知道我在做什么......我已经粘贴了一些代码来构建一个我在网上找到的地址簿到我使用 jQuery 移动框架的网站中。问题是在提交表单时，页面会刷新。为了阻止这种情况发生，我想我可能需要添加'return false;' 但我不确定......任何建议将不胜感激！

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile: Theme Download</title>
        <link rel="stylesheet" href="themes/tya.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
        <link href="themes/mycss.css" rel="stylesheet" type="text/css">
        <script>
        function save() {
            var fieldValue = document.getElementById('textfield').value;
            localStorage.setItem('text', fieldValue);
        }

        function load() {
            var storedValue = localStorage.getItem('text');
            if (storedValue) {
                document.getElementById('textfield').value = storedValue;
            }
        }

        </script>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    </head>
<body onload="load()">
<!-- Start of first page: #one -->
<div data-role="page" id="home">

    <img src="images/tya-logo.png" alt="TYA Logo" width="121" height="84" class="logo">
    <!-- /header -->

<!-- MENU -->
    <div data-role="content" >  
        <div data-role="controlgroup">
        <a href="#blogs" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Blogs</a>
        <a href="#blood" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Bloods</a>
        <a href="#contacts" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Contacts</a>
        <a href="#documents" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Documents</a>
        <a href="#maps" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Maps</a>
        <a href="#links" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Links</a>
        </div>
  </div><!-- /content -->

    <div data-role="footer" data-theme="a">
        <h4>&copy; 2013 Teenage & Young Adults Leeds</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- BLOGS -->
<div data-role="page" id="blogs" data-theme="a">

    <div data-role="header"><a href="#home" data-role="button" data-icon="home" data-transition="none" data-dom-cache="true">home</a>
      <h1>Blogs</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">    
        <h2>Two</h2>

    </div><!-- /content -->

    <div data-role="footer" data-theme="a">
        <h4>&copy; 2013 Teenage & Young Adults Leeds</h4>
    </div><!-- /footer -->
</div><!-- /page two -->


<!-- BLOODS -->
<div data-role="page" id="blood">

    <div data-role="header"><a href="#home" data-role="button" data-icon="home" data-transition="none" data-dom-cache="true">home</a>
      <h1>Bloods</h1>
    </div><!-- /header -->
    <table id="contacts-table">
    <tr id="contacts-head">
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
        <th>Actions</th>
    </tr>
</table>

<form id="contacts-form">
        <div class="item text">
            <label>First name:</label>
            <div class="field"><input type="text" name="first_name" /></div>
        </div>
        <div class="item text">
            <label>Last name:</label>
            <div class="field"><input type="text" name="last_name" /></div>
        </div>
        <div class="item text">
            <label>Email:</label>
            <div class="field"><input type="text" name="email" /></div>
        </div>
        <div class="button-wrapper">
            <div class="item button">
                <div class="field"><input type="button" id="contacts-op-discard" value="Discard" /></div>
            </div>
            <div class="item button button-default">
                <div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
            </div>
        </div>
        <input type="hidden" name="id_entry" value="0" />
    </form>


    <!-- SCRIPT FOR FORM FUNCTIONALITY -->
    <script>
        var Contacts = {
            index: window.localStorage.getItem("Contacts:index"),
            $table: document.getElementById("contacts-table"),
            $form: document.getElementById("contacts-form"),
            $button_save: document.getElementById("contacts-op-save"),
            $button_discard: document.getElementById("contacts-op-discard"),

            init: function() {
                // initialize storage index
                if (!Contacts.index) {
                    window.localStorage.setItem("Contacts:index", Contacts.index = 1);
                }

                // initialize form
                Contacts.$form.reset();
                Contacts.$button_discard.addEventListener("click", function(event) {
                    Contacts.$form.reset();
                    Contacts.$form.id_entry.value = 0;
                }, true);
                Contacts.$form.addEventListener("submit", function(event) {
                    var entry = {
                        id: parseInt(this.id_entry.value),
                        first_name: this.first_name.value,
                        last_name: this.last_name.value,
                        email: this.email.value
                    };
                    if (entry.id == 0) { // add
                        Contacts.storeAdd(entry);
                        Contacts.tableAdd(entry);
                    } 
                    else { // edit
                        Contacts.storeEdit(entry);
                        Contacts.tableEdit(entry);
                    }

                    this.reset();
                    this.id_entry.value = 0;
                    event.preventDefault();
                }, true);

                // initialize table
                if (window.localStorage.length - 1) {
                    var contacts_list = [], i, key;
                    for (i = 0; i < window.localStorage.length; i++) {
                        key = window.localStorage.key(i);
                        if (/Contacts:\d+/.test(key)) {
                            contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
                        }
                    }

                    if (contacts_list.length) {
                        contacts_list
                            .sort(function(a, b) {
                                return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
                            })
                            .forEach(Contacts.tableAdd);
                    }
                }
                Contacts.$table.addEventListener("click", function(event) {
                    var op = event.target.getAttribute("data-op");
                    if (/edit|remove/.test(op)) {
                        var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
                        if (op == "edit") {
                            Contacts.$form.first_name.value = entry.first_name;
                            Contacts.$form.last_name.value = entry.last_name;
                            Contacts.$form.email.value = entry.email;
                            Contacts.$form.id_entry.value = entry.id;
                        }
                        else if (op == "remove") {
                            if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
                                Contacts.storeRemove(entry);
                                Contacts.tableRemove(entry);
                            }
                        }
                        event.preventDefault();
                    }
                }, true);
            },

            storeAdd: function(entry) {
                entry.id = Contacts.index;
                window.localStorage.setItem("Contacts:index", ++Contacts.index);
                window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
            },
            storeEdit: function(entry) {
                window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
            },
            storeRemove: function(entry) {
                window.localStorage.removeItem("Contacts:"+ entry.id);
            },

            tableAdd: function(entry) {
                var $tr = document.createElement("tr"), $td, key;
                for (key in entry) {
                    if (entry.hasOwnProperty(key)) {
                        $td = document.createElement("td");
                        $td.appendChild(document.createTextNode(entry[key]));
                        $tr.appendChild($td);
                    }
                }
                $td = document.createElement("td");
                $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
                $tr.appendChild($td);
                $tr.setAttribute("id", "entry-"+ entry.id);
                Contacts.$table.appendChild($tr);
            },
            tableEdit: function(entry) {
                var $tr = document.getElementById("entry-"+ entry.id), $td, key;
                $tr.innerHTML = "";
                for (key in entry) {
                    if (entry.hasOwnProperty(key)) {
                        $td = document.createElement("td");
                        $td.appendChild(document.createTextNode(entry[key]));
                        $tr.appendChild($td);
                    }
                }
                $td = document.createElement("td");
                $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
                $tr.appendChild($td);
            },
            tableRemove: function(entry) {
                Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
            }
        };
        Contacts.init();
    </script>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>

score 0 · Accepted Answer

您的代码非常混乱，将所有内容堆叠在一个文档中并不是一个好习惯。
记住：

总是更喜欢关注点分离（如果您使用任何像 js 这样的脚本，请尝试将该代码放在外部脚本文件中）。

不要把 js 和 html 混在一起，最后你会感到困惑。
最后一件事，为了提交表单，您需要做的就是在匿名函数（表单提交）中传递任何命名参数（e 是首选，因为它是事件的简写）。然后，然后e.preventDefault();
这将拦截表单提交的默认行为，因此页面将永远不会刷新。
示例 //假设这是您的表单提交事件处理程序。

$('form_id/class').on('submit',function(e){

                  e.preventDefault();


             //logic goes here.....

   })

e.preventDefault() 的位置无关紧要，您可以将它放在您的逻辑上方或下方，在您的回调中。但是您必须放置它以防止表单的默认行为。
干杯!

score 0 · Accepted Answer

return false在函数中使用

        function save() {
            var fieldValue = document.getElementById('textfield').value;
            localStorage.setItem('text', fieldValue);
            return false;
        }

你return save()在哪里调用你的函数

<input type="submit" id="contacts-op-save" value="Save" click="return save()" />

score 0 · Accepted Answer

event.preventDefault();

将其添加到您的函数“Contacts.$form.addEventListener("submit", function(event) {..."

Contacts.$form.addEventListener("submit", function(event) {
event.preventDefault();
...

});

应该像魅力一样工作。

周。

jquery - 防止从 jQuery Mobile 的提交按钮刷新页面

3 回答 3

Related

Reference