jQueryモバイルスワイプliで隠しチェックボックスをチェック

Question

jQuery Mobileでswiperightを探して、リストをハイライト表示し、その中の隠しチェックボックスをチェックします。私は再びswiperightをすると、その行動を逆転させます。ここでは、私がこれまでに収集されたものです：

HTML：

<ul data-role="listview"> 
    <li><a href="#resultPage">Deals<input type="checkbox"/></a></li> 
</ul> 

CSS：

input[type="checkbox"] 
{ 
    display:none; 
} 

のjQuery：

$(document).ready(function() { 
     //Swipe 
    $("#searchPage li").live('swiperight', function(){ 
    if($(this).children(':input:checkbox').is(':checked')){ 
     $(this).css('background','orange'); 
     $(this).children(':input:checkbox').click(); 
    }else{ 
     $(this).css('background', ''); 
     $(this).children(':input:checkbox').click(); 
    } 
    } 
    });//END ready 

Answer 1

<a>タグを削除してご確認ください...... （理由は分かりませんが、<a>を削除した場合は正常に動作します）

サンプルコード：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<div data-role="page" id="page"> 

    <div data-role="content"> 
     <p> 
      <ul data-role="listview" data-inset="true" data-theme="c"> 
       <li id="listitem"> Deals<input id="checkbox" type="checkbox" /></li> 
      </ul> 
     </p> 
    </div> 


    </div> 
</div> 

とJSコード：ここで

$(document).ready(function() { 

    $('#page').bind('swiperight', function(){ 

    if($('#checkbox').is(':checked')){ 
     $(this).css('background','orange'); 
     $('#checkbox').click() 

    }else{ 

     $(this).css('background', ''); 
     $('#checkbox').click() 
    } 
    }); 
    });//END ready​ 

サンプル例：

http://jsfiddle.net/reddyprasad321/WmsjX/

http://jsfiddle.net/reddyprasad321/WmsjX/