navigator.notification.alert 为 IOS 上的 1 个呼叫触发 4 个警报 - jquery mobile - phonegap 2.2.0答案

【问题标题】：navigator.notification.alert fires 4 alerts for 1 call on IOS - jquery mobile - phonegap 2.2.0navigator.notification.alert 为 IOS 上的 1 个呼叫触发 4 个警报 - jquery mobile - phonegap 2.2.0
【发布时间】：2012-11-27 20:19:52
【问题描述】：

不确定这里发生了什么...但假设用户输入他们的 PIN 并点击 GO 按钮，当 PIN 无效时执行以下代码：

navigator.notification.alert(
    "Invalid PIN entry. Please try again.",
    alertDismissed,
    "ETA Security",
    ""
);

function alertDismissed(){
    //does nothing
}

这是第一次工作（只要我不离开并返回就反复）......但是当我在页面之间导航时（jquery mobile：一切都在一个页面上[index.html]）并返回进入另一个 PIN...我再次调用 navigator.notification.alert，但这一次，它显示了 4 次警报（5、6，每次我返回页面时，它都会添加另一个警报）！

有什么想法吗？

编辑 - 添加完整示例

** 用户单击使用 ajax 的链接进入数据库，该数据库返回包含列表的 json 对象。

数据库调用是一个ajax调用：

$.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);
  }
});

ajax 调用返回：

  getFifs({"rows":[
           {
        "ID":"12345",
            "CONF":"1",
            "LINK":"http://www.cnn.com",
            "DIS":"My FIF",
            "CONFIRM_CODE":"flightxyz",
            "DESCRIP":"Fif showing blah blah blah"
           }
          ]}
        );

在getFifs函数中，下方的CONFIRM BUTTON区域是调用警报的地方（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>

【问题讨论】：

标签： cordova jquery-mobile alert

【解决方案1】：

您在哪里附加点击处理程序？如果它在 pageshow 上设置或作为页面创建中的委托事件设置，则最终可能会出现重复的处理程序。

要么移动事件绑定代码，要么返回 false，因此只有一次运行才能修复它

【讨论】：

多种方式...这里有一种：code <a href="#" onclick="showAlert();" data-rel="dialog" data-theme="c" data-role="button">CONFIRM</a> function showAlert(){ navigator.notification.alert( 'You must first View the FIF before confirming it!', alertDismissed, 'Confirm Error', '' ); } function alertDismissed(){ //does nothing }
该方法不会导致重复，必须是其他众多方法之一。您显示的代码 sn-ps 很好，它们适合导致问题的应用程序的整体结构。
我编辑了我的原始帖子以显示完整的示例。谢谢你的帮助，汤姆！
在 onclick 中声明内联的 shoe 函数很容易出错——我认为你有一些不匹配的引号。尝试将 on click 属性保留为带有一两个参数的简单函数调用。
谢谢汤姆。但是，我尝试在链接中使用函数调用，而不是使用以下代码，但仍然收到多个警报：code ... strLi+='<a href="javascript:void(0)" onclick="checkFif(fifViewArray['+arrayCnt+']);" data-rel="dialog" data-theme="c" data-role="button">Confirm</a>'; function checkFif(read){ if(read==1){ $.mobile.changePage('#fifPinEntry','flip', false, true); $('#fifconfirmpinsingle').val(''); }else{ etajs.showalertReset=0; etajs.showAlert('Confirm Error','You must first View the FIF before confirming it!',etajs.alertDismissed); } }help！ ;)

【解决方案2】：

这是因为 jQM 的工作原理，它不是错误。

如果您在某个元素或操作上绑定事件，则每次您重新访问该页面时，该事件都会再次绑定。因此，每次页面重新加载都是一次绑定。

可以这样避免：

如果事件与 .bind( 或 .on( 绑定，则在使用 .unbind( 或 .off( 再次绑定之前解绑它。这是相当愚蠢的想法，为什么绑定/解绑你可以：
使用 jQuery 事件过滤器并在尝试绑定之前检查事件是否已绑定。你可以找到它here。

例子：

$('#button:Event(!click)').each(function(){ // 按钮没有绑定点击事件，现在绑定 });

另一个example，2比1：

$('document:Event(!deviceready)').each(function(){
    $('#button').unbind();
    $('#button').bind('click', function(e) {
         navigator.notification.alert("PhoneGap is working");
    });
});

【讨论】：

感谢您的回复，Gajotres！我对 JQM 还很陌生......我想知道你是否可以用勺子喂我一点如何做到这一点？ navigator.notification.alert 是一个 phonegap 的东西......在我每次尝试显示警报之前，我将如何取消绑定或“清除”它的任何先前实例？
注意：我的主页 index.html 永远不会自行重新加载。所有导航都是 JQM 和 ajax 调用
换页返回就够了，会绑定另一个事件
看这个例子：stackoverflow.com/questions/12477772/…，警报显示在 deviceready 事件上，我会用一个例子更新我的答案
非常感谢您的帮助！！！恐怕我还是不明白……你对phonegap有什么了解吗？你能给我看一个使用 navigator.notification.alert() 的例子吗？我不希望取消绑定/绑定单个按钮单击...整个框架使用 navigator.notification.alert...我需要一种方法来销毁任何现有实例，然后再尝试再次调用 navigator.notification.alert... ***** 在我调用 navigator.notification.alert 之前，我需要一些方法来销毁它的先前实例（或检查它是否已经存在......那么如何向它发送消息？）......

【解决方案3】：

好的！最后！！！我不敢相信......所以这就是我修复它的方法。我将列表中的锚点更改为带有 onclick 的 input type=button ...

这里是之前的动态列表视图项：

strLi+='<a href="javascript:void(0)" data-rel="dialog" data-role="button">Confirm</a>';

这是链接点击设置（我尝试了所有可能的方法，但这只是一种。我还在锚点中尝试了 onclick）

$('.fifconfbut').live('click', function() {
    checkFif(); //This function call fires multiple times upon returning to the page
    return(false);
});

还有工作代码！

strLi+='<input onclick="checkFif();" type=button data-rel="dialog" data-role="button" value="Confirm">';



//This is the function that gets called when the item is clicked
function checkFif(){
    etajs.showAlert('Confirm Error','blah blah blah',etajs.alertDismissed);
    return(false);

}

我想知道的是为什么一个锚点会触发多次点击事件而按钮却没有？

【讨论】：