2

不知道这里发生了什么......但是假设用户输入他们的 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>
4

3 回答 3

2

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

移动事件绑定代码或返回 false 所以只有一个运行应该修复它

于 2012-11-27T20:56:32.397 回答
2

这是因为 jQM 的工作方式，它不是错误。

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

可以这样避免：

  1. 如果事件与 .bind( 或 .on( 绑定，然后再与 .unbind( 或 .off( 绑定

  2. 使用 jQuery 事件过滤器并在尝试绑定之前检查事件是否已绑定。你可以在这里找到它。

例子：

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

另一个例子，2 比 1：

$('document:Event(!deviceready)').each(function(){
    $('#button').unbind();
    $('#button').bind('click', function(e) {
         navigator.notification.alert("PhoneGap is working");
    });
});
于 2012-11-27T20:53:20.840 回答
1

好的！最后！！！我不敢相信......所以这就是我修复它的方法。我将列表中的锚点更改为带有 onclick 的输入类型 = 按钮...

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

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);

}

我想知道的是为什么锚点会触发多个点击事件而按钮不会触发？

于 2012-12-05T18:14:24.707 回答