Question

我遇到PhoneGap和jQuery Mobile的问题，即事件触发两次在我的应用中的bookdetailpage(bookdetailpage.html）上。当我选中复选框时，会触发一个事件并对Web服务进行一些更新。（代码中为updateBooksInMybooks()）

我只想选中复选框，更新必须在后台完成。如果选中复选框，则应保持原样，或者不应该取消选中（正常情况下）。

但是当我点击/选中复选框时，它似乎正常工作但事件一次触发两次。

点击/选中复选框时第一次（应该）。
当我点击/点按屏幕上的任意位置时，第二次再次点击。

以下是代码：

...
<div data-role="page" data-theme="c" id="detailpage"  data-url="detailpage.html">
<div data-role="header" id="hdrBokDetaljer" name="hdrBokDetaljer"  data-theme="c" >
      ...
</div>
<div data-role="content" id="contentBokDetaljer" name="contentBokDetaljer" >
        ...        
 <div id="detailmybooks">
   <fieldset id="mybooksGroup" data-role="controlgroup">                    
       <input type="checkbox" name="checkInMybooks" id="checkInMybooks" class="custom" />
       <label for="checkInMybooks">My books</label>    
   </fieldset>               
 </div>            
</div>

<div data-role="footer" id="ftrBokDetaljer" name="ftrBokDetaljer" ></div>

<script type="text/javascript" charset="utf-8">
   $(document).delegate('#detailpage', 'pagecreate', function () {

      $('#checkInMybooks').attr("checked", detailCheckboxVar); 

   });

   $('#checkInMybooks').change(function () {

       //event.preventDefault();
       updateBooksInMybooks($('#detailbookid').html());

       return false;
   });
</script> 
</div>
...

Answer 1

老问题，但是我遇到了类似的问题所以我发布这个问题希望能帮到别人。当我正确地等待来自PhoneGap的“deviceReady”事件时，点击和点击的双击就消失了。如果我等待，点击和点击只发射一次，但如果我没有等待，那么他们会发射两次。以下是如何使其工作：

添加到您的身体标签

<body onload="onBodyLoad()">

然后添加一些JavaScript：

<script type="text/javascript">
   function onBodyLoad() {
      document.addEventListener("deviceready", onDeviceReady, false);
   }

   function onDeviceReady() {
      $(function() {
         // Do your stuff here, binding to elements, etc
      });
   }
</script>

Answer 2

尝试，on('click')。

举个例子：

$("#btn_back_home").on('click',function(event)
{
    $.mobile.changePage( "#mobile_page_main", {reverse: true,changeHash: false});
});

Phonegap和jQuery Mobile Event一次触发两次

2 个答案: