1

我正在使用jquery mobile。实际上我的问题是当用户从不同页面切换时我的页面被调用3次。第一次我的“主页”调用一次。我使用标题中的（+）按钮在数据库中添加一些数据.it 显示在列表视图中。但是在单击行后它显示第二页。在单击第二页行时它显示第三个屏幕。使用后退按钮时它再次显示第二个第一个。但是用户再次按下 + 按钮现在页面调用三次。？为什么它会调用三遍我不知道？

这是我的小提琴代码.. http://jsfiddle.net/ravi1989/AkX7t/2/

<div data-role="page" id="Home" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
                <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                    <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                    <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderData" >
                </ul>
                 <!--   Case Information Pop up-------------------------->
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
                    <div data-role="header" data-theme="b" >

                        <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                        <h1>Case Information</h1>
                        <a href="#" ddata-role="button" data-corners="false" id="AddButton">Add</a>
                    </div>

                     <div data-role="content">
                    <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="caseNameValue" value="" type="text">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                        <input name="text-12" id="caseDate" value="" type="text">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="textarea-12">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea-12" id="caseTextArea"></textarea>
                    </div>
                    </div>
                </div>
              <!--   Case Information Pop up End-------------------------->

                  <!--   User setting Pop up-------------------------->
              <div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
            <div data-role="header" data-theme="b" >
                <a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
                <h1>User Settings</h1>
                <a href="#" ddata-role="button" data-corners="false">Ok</a>
            </div>

            <div data-role="content">
                 <div><img src="img/Documents.png"/></div>
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                    <input name="text-12" id="text-12" value="" type="text"/>
                </div>  
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                    <select name="select-choice-1" id="select-choice-1">
                        <option value="standard">A</option>
                        <option value="rush">B</option>
                    </select>
                </div>
            </div>                
        </div>
             <!--   User setting Pop up End-------------------------->

            </div>

            <script>

                        $(document).on('pagebeforeshow', '#Home', function() {

                       });

               </script>
        </div>


        <!-----------Document screen------------------->
        <div data-role="page" id="DocumentScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                <a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <div><img src="img/Connect-Realtime.png" id="realTimeImaage"/></div>

                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderInside_Data" >
                </ul>

            </div>

            <script>


                $(document).on('pagebeforeshow', '#DocumentScreen', function() {
                console.log("init");
                 loadFolderContent();
                });
                        function loadFolderContent() {

                        for (i = 0; i < 40; i++) {
                        $('#folderInside_Data').append(
                          '<li class="rowID" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                                );
                        }
                        $('#folderInside_Data').listview('refresh');
                        }


                $(document).on('click', '.rowID', function() {
                      // $.mobile.changePage($("#realTimeScreen"));
                $.mobile.changePage($("#realTimeScreen"), {
                transition: "pop",
                        reverse: false,
                        changeHash: false
                });
                    console.log(this.id)
                });</script>
        </div>
       <!-----------Document screen End------------------->

        <!-----------------------Real Time screen----------------------------->

        <div data-role="page" id="realTimeScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
                <a href="#DocumentScreen" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;">Back</a>
                <h1 class="ui-title"  id="" style="text-align:left;margin-left: 100px;">Document name</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <a><img src="img/Follow-Realtime.png" id=""/></a>
                    <a><img src="img/Stop-Realtime.png" id=""/></a>
                    <a><img src="img/Email-Document.png" id=""/></a>
                    <a><img src="img/Connect-Realtime.png" id=""/></a>
                    <a><img src="img/Manage-Case-Folders.png" id=""/></a>
                    <a><img src="img/Export-Realtime.png" id=""/></a>
                </div>
            </div>
            <div data-role="content" data-theme="d">
                <div id="realTimeContents"></div>
            </div>
            <script>
         <!-----------------------add data Time screen----------------------------->
                for (i = 0; i < 400; i++) {
                $('#realTimeContents').append(
                        '<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>'+ '<br>'+ '<br>'
                        );
                }
            </script>
            </div>


$(document).ready(function() {

                         $.mobile.loading('hide');
                         onDeviceReady();
                         });


$(document).bind('pagecreate', function(e) {
    if (e.target.id == 'Home') {
        $("#headerButtons").on("click", "a", function() {

            if ($(this).attr("id") == "Add") {
                $('#caseNameValue').val('');
                $('#caseDate').val('');
                $('#caseTextArea').val('');
            } else if ($(this).attr("id") == "Setting") {
            } else if ($(this).attr("id") == "Edit") {
            }
        });

    }


    $(document).on('click', '.caseRowClick', function() {
        // $.mobile.changePage($("#DocumentScreen"));
        $.mobile.changePage($("#DocumentScreen"), {
            transition: "slide",
            reverse: false,
            changeHash: false
        });
        console.log(this.id)
    });


    $("#AddButton").click(function() {
        var isvalid = validationField();
        if (isvalid) {
            insertData();
            window.localStorage.setItem("isAddSomeData", "yes");
             $.mobile.changePage($("#Home"));
            /*$.mobile.changePage($("#Home"), {
                transition: "slide",
                reverse: false,
                changeHash: false
            });*/
        }
    });


    $("#Cancel").click(function() {
        $.mobile.changePage($("#Home"));
        /*$.mobile.changePage($("#Home"), {
            transition: "pop",
            reverse: false,
            changeHash: false
        });*/
    });


    $("#CancelSettingButton").click(function() {
         $.mobile.changePage($("#Home"));
       /* $.mobile.changePage($("#Home"), {
            transition: "slide",
            reverse: false,
            changeHash: false
        });*/
    });

});

function validationField() {
    if ($('#caseNameValue').val() == '') {
        alert("Please Enter the Case Name");
        return false;
    } else if ($('#caseDate').val() == '') {
        alert("Please Enter the Case Date");
        return false;
    } else if ($('#caseTextArea').val() == '') {
        alert("Please Enter the Case Text Area");
        return false;
    }
    return true;

}

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


document.addEventListener("deviceready", onDeviceReady, false);
var db = "";
//will create database Dummy_DB or open it

//function will be called when device ready
function onDeviceReady() {
    db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
    if (window.localStorage.getItem("isAddSomeData") == "yes") {
        alert("Yes");
        db.transaction(queryDB, errorCB);
    }
    //   db.transaction(populateDB, errorCB, successCB);
}

function insertData() {
    db.transaction(populateDB, errorCB, successCB);
}

//create table and insert some record
function populateDB(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName TEXT NOT NULL,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
    tx.executeSql('INSERT INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("' + $('#caseNameValue').val() + '", "' + $('#caseDate').val() + '","' + $('#caseTextArea').val() + '")');
}

//function will be called when an error occurred
function errorCB(err) {
    alert("Error processing SQL: " + err.code);
}

//function will be called when process succeed
function successCB() {
    console.log("success!");
    db.transaction(queryDB, errorCB);
}

//select all from SoccerPlayer
function queryDB(tx) {
    tx.executeSql('SELECT * FROM CaseTable', [], querySuccess, errorCB);
}

function querySuccess(tx, result) {
    var len = result.rows.length;
    $('#folderData').empty();
    for (var i = 0; i < len; i++) {

        $('#folderData').append(
                '<li class="caseRowClick" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>' + result.rows.item(i).CaseName + '</h2>' + '<p>' + result.rows.item(i).CaseDate + '</p>' + '<p>' + result.rows.item(i).TextArea + '</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                );
    }
    $('#folderData').listview('refresh');

}
4

1 回答 1

1

我希望我理解正确，这是jQuery Mobile多事件绑定的常见问题。基本上，根据您使用的页面事件，当您重新打开某个页面时，所有事件绑定（如 click）都会再次绑定。因此，您可以对一个对象进行多次单击事件。

处理此问题的最佳解决方案是，仅像这样绑定单击和所有其他事件（页面事件除外，它们不会遇到此问题）：

$(document).off('click', '.caseRowClick').on('click', '.caseRowClick', function() {
    // $.mobile.changePage($("#DocumentScreen"));
    $.mobile.changePage($("#DocumentScreen"), {
        transition: "slide",
        reverse: false,
        changeHash: false
    });
    console.log(this.id)
});

在这种情况下，每次将要绑定此单击事件时，jQuery Mobile将首先尝试删除先前的单击（如果存在），然后添加一个新的。

这个问题还有一些其他的解决方案，可以在这篇文章中找到，为了透明，这是我的个人博客。只需搜索名为：防止多个事件绑定/触发的章节。此处描述了此问题，并提供了更多详细信息+示例。

于 2013-06-20T08:42:45.853 回答