navigator.notification.alert在IOS - jquery mobile - phonegap 2.2.0上为1个调用触发4个警报 [英] navigator.notification.alert fires 4 alerts for 1 call on IOS - jquery mobile - phonegap 2.2.0
问题描述
不确定这里发生了什么...但让我们说，用户输入他们的PIN并点击执行以下代码的GO按钮，当PIN无效时：
navigator.notification.alert（
无效的PIN码输入，请重试。，
alertDismissed，
ETA Security，
）;
function alertDismissed（）{
//没有
}
这是第一次（并重复，只要我不导航离开和返回）...但是当我在页面之间导航（jquery手机：一切都在一个页面上[index.html]），并回来输入另一个PIN ...我再次调用navigator.notification.alert，但这次，它显示警报4次（5，6，每次我返回页面，它添加另一个警报）！
$ / strong> - 添加完整示例 **
用户单击一个链接，使用ajax转到数据库，返回包含该列表的json对象。
数据库调用是一个ajax调用：
$。ajax （{
cache：false，
type：POST，
url：我的URL告诉数据库返回FIF列表JSON对象，
data：sFrmData，
success：function（ajaxResponse）{
eval（ajaxResponse）;
wait（0）;
}
}）;
ajax调用返回：
getFifs（{rows：[
{
ID：12345，
CONF：1，
LINK：http://www.cnn.com，
DIS：我的FIF，
CONFIRM_CODE：flightxyz，
DESCRIP Fif显示blah blah blah
}
]}
）;
在函数getFifs中，下面的CONFIRM BUTTON区域是被调用的警报（etajs.showAlert （\'Confirm Error\'...）
//构建FIF的列表
function getFifs（oJson）{
//将JQM页面更改为fifs
$ .mobile.changePage（＃fifs，none，false ，true）;
var strLi =;
var arrayCnt = 0;
var numTotal = 0;
$（＃listFif）。 ）;
strLi + ='< ul data-role =listviewdata-inset =truedata-theme =d>';
$ .each .rows，function（）{
numTotal ++;
var disname = this.DIS;
var fifid = this.ID;
var fiflink = this.LINK;
var descrip = this.DESCRIP;
var conf = this.CONF;
strLi + ='< li>< font size = 5>'+ disname +'< / font> < br>';
// ********************************** ********
// CONFIRM BUTTON
strLi + ='< div data-mini =truedata-role =controlgroupdata-type =horizontal> ;
strLi + ='< a href =＃fifCodeonclick =if（fifViewArray ['+ arrayCnt +'] == 1）{etajs.setIdHolder（'+ fifid +'）;} else {etajs.showAlert （\'确认错误\'，\'您必须首先查看FIF，然后再确认！\'，etajs.alertDismissed）;;}';
strLi + ='data-rel = data-theme =cdata-role =button> Confirm< / a>';
strLi + ='< / div>';
strLi + ='< div style = white-space：normal;>说明：< font color = grey>'+ descrip +'< / font>< / div>';
strLi + ='< / li>
}）; // end loop
strLi + ='< / ul>< Br>< br>';
$（＃listFif）。 （strLi）.trigger（create）;
updateScrolling（wrapperFifs）;
}
function showAlert（strTitle，strMessage，strCallback）{
navigator .notification.alert（
strMessage，// message
strCallback，// callback with button for button button
strTitle，// title
''// buttonLabels
）;
}
< / SCRIPT>
<！ - FIF页面 - >
< div id =fifsdata-role =page>
< div id =wrapperFifsclass =iscroll_wrapperstyle =padding-top：0px;>
< div class =scrollerid =listFif>< / div>
< / div>
< / div>
这是因为jQM如何工作，一个错误。
如果绑定某个元素或操作的事件，则每次重新访问该页面时，该事件将再次绑定。
这样可以避免：
-
如果事件绑定了.bind（或.on（解除绑定，再绑定它与.unbind（或.off（这是相当bed想法，为什么bind / unbind whertn你可以： / p>
-
使用jQuery事件过滤器，并在尝试绑定事件之前检查事件是否已绑定，您可以找到此处。
示例：
$（'＃button：Event（！click）'）。each（function（）{
// button do not have bound点击事件，现在绑定
}）;
另一个示例，2为1：
code> $（'document：Event（！deviceready）'）每个（function（）{
$（'＃button'）。unbind（）;
$（'＃button' ）.bind（'click'，function（e）{
navigator.notification.alert（PhoneGap is working）;
}）;
}）;
Not sure whats going on here... but lets say a user enters their PIN and hits a GO button which performs the code below when the PIN is invalid:
navigator.notification.alert(
"Invalid PIN entry. Please try again.",
alertDismissed,
"ETA Security",
""
);
function alertDismissed(){
//does nothing
}
This works the first time (and repeatedly as long as I dont navigate away and return)... but as I navigate between pages (jquery mobile: everything is on one page [index.html]) and come back to enter another PIN... I call navigator.notification.alert again, but this time, it shows the alert 4 times (5, 6, every time I return to the page, it adds another alert)!
any ideas?
**
EDIT - complete example added
** The user clicks a link that uses ajax to go to the database which returns a json object containing the list.
The database call is an ajax call:
$.ajax({
cache: false,
type: "POST",
url: "my url telling the database to return the FIF list JSON object",
data: sFrmData,
success: function(ajaxResponse){
eval(ajaxResponse);
wait(0);
}
});
The ajax call returns this:
getFifs({"rows":[
{
"ID":"12345",
"CONF":"1",
"LINK":"http://www.cnn.com",
"DIS":"My FIF",
"CONFIRM_CODE":"flightxyz",
"DESCRIP":"Fif showing blah blah blah"
}
]}
);
In the function getFifs, the CONFIRM BUTTON area below is where the alert is being called (etajs.showAlert(\'Confirm Error\'...)
//Build the list of FIFs
function getFifs(oJson){
//change JQM page to fifs
$.mobile.changePage("#fifs", "none", false, true);
var strLi=" ";
var arrayCnt=0;
var numTotal=0;
$("#listFif").empty();
strLi+='<ul data-role="listview" data-inset="true" data-theme="d">';
$.each(oJson.rows,function(){
numTotal++;
var disname=this.DIS;
var fifid=this.ID;
var fiflink=this.LINK;
var descrip=this.DESCRIP;
var conf=this.CONF;
strLi+='<li><font size=5>' + disname + '</font><br>';
//******************************************
//CONFIRM BUTTON
strLi+='<div data-mini="true" data-role="controlgroup" data-type="horizontal">';
strLi+='<a href="#fifCode" onclick="if(fifViewArray['+arrayCnt+']==1){etajs.setIdHolder('+fifid+');"}else{etajs.showAlert(\'Confirm Error\',\'You must first View the FIF before confirming it!\',etajs.alertDismissed);";} ';
strLi+='data-rel="dialog" data-theme="c" data-role="button">Confirm</a>';
strLi+='</div>';
strLi+='<div style="white-space:normal;">Description:<font color=gray> ' + descrip + '</font></div>';
strLi+='</li>';
}); //end loop
strLi+='</ul><Br><Br>';
$("#listFif").append(strLi).trigger("create");
updateScrolling("wrapperFifs");
}
function showAlert(strTitle,strMessage,strCallback){
navigator.notification.alert(
strMessage, // message
strCallback, // callback to invoke with index of button pressed
strTitle, // title
'' // buttonLabels
);
}
</SCRIPT>
<!--FIFs Page-->
<div id="fifs" data-role="page">
<div id="wrapperFifs" class="iscroll_wrapper" style="padding-top:0px;">
<div class="scroller" id="listFif"></div>
</div>
</div>
This is because of how jQM works, it is not an error.
If you bind an event on some element or action, each time you revisit that page that event will bind again. So every page reload is one binded even more.
This can be averted like this:
If event is bind with .bind( or .on( unbind it before you bind it again with .unbind( or .off( . This is rather bed idea, why bind/unbind whertn you can:
Use jQuery Event filter and check if event is bound before you try to bind it. You can find it here.
Example:
$('#button:Event(!click)').each(function(){ // button don't have bound click event, bind it now });
Another example, 2 for 1:
$('document:Event(!deviceready)').each(function(){
$('#button').unbind();
$('#button').bind('click', function(e) {
navigator.notification.alert("PhoneGap is working");
});
});
这篇关于navigator.notification.alert在IOS - jquery mobile - phonegap 2.2.0上为1个调用触发4个警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
