Зачем звонить на номер страницы, когда пользователь переключается между разными страницами в jquery mobile
Я использую jquery mobile. На самом деле моя проблема заключается в том, что моя страница звонит 3 раза, когда пользователь переключается с разных страниц. В первый раз мой вызов "Home" один раз. Я добавляю некоторые данные в базу данных, используя кнопку (+) в заголовке.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');
}
1 ответ
Надеюсь я вас правильно понял, это обычное дело jQuery Mobile проблема с привязкой нескольких событий. В основном, в зависимости от используемых вами событий страницы, при повторном открытии какой-либо страницы все привязки событий, такие как нажатие, будут связаны снова. Таким образом, вы можете иметь более одного события клика на объекте.
Лучшее решение для решения этой проблемы - привязать щелчок и любые другие события (кроме событий страницы, они не страдают от этой проблемы) ТОЛЬКО так:
$(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 сначала попытается удалить предыдущий клик даже (если он существует), а затем добавить новый.
Есть несколько других решений этой проблемы, и их можно найти в этой СТАТЬЕ, чтобы быть прозрачным, это мой личный блог. Просто найдите главу под названием: Предотвратить связывание / запуск нескольких событий. Эта проблема описана здесь гораздо более подробно + примеры.