0

だから私はjQueryモバイルを使用していて、アイテムをあるリストから別のリストに移動しようとしています. 私はこれを持っています：

$('document').ready(function() {
    $('.green, .blue, .red').click(function(){
        var $move = $(this).closest('div[data-theme="a"]').appendTo("#summary .theListItem");
    });
});

同じページの同じリストのアイテムを移動するときに美しく機能します。そのdivを指定しても、他のページの他のリストに移動しません。これがsummary.htmlの私のhtmlです： 

<ul id="thelist" data-corners= "false" >
 <div id="summary">
  <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a" style= "background-color: #0066cc;">
       <h3>I want it to show here</h3>
       <div data-role="controlgroup"  data-type="horizontal">
         <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Tax deductible</a>
         <a class="red" href="#" data-role="button">Not deductible</a>
         <a class="blue" href="IDontKnow.html" data-transition="slideup" data-role="button">I don't know</a>
       </div>
     </div>
   </div>
 </ul>

これがtrans.htmlの私のhtmlです: 

<ul id="thelist" data-corners= "false" >
  <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a" style= "background-color: #0066cc;">
       <h3>I want this to move</h3>
       <div data-role="controlgroup"  data-type="horizontal">
         <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Tax deductible</a>
         <a class="red" href="#" data-role="button">Not deductible</a>
         <a class="blue" href="IDontKnow.html" data-transition="slideup" data-role="button">I don't know</a>
       </div>
     </div>
 </ul>

そして、これはページの同じヘッドです：

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<script src="js/jQuery/jquery-1.8.2.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
--><script src="jquery.mobile-1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
<!--<script src="jquery.mobile-1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css"></script>-->


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>   

<script type="text/javascript" src="cubiq-iscroll-bad88fb/src/iscroll.js"></script>    

<script src="js/scrollbar.js"></script>
<script src="js/script.js"></script>

<link rel="stylesheet" href="css/jQueryMobileStructure.css" />
<link rel="stylesheet" href="css/style.css" /> 
<link rel="stylesheet" href="css/nikostyle.css" /> 

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>


</head>

本当にありがとう

4

1 に答える 1

0

jQuery モバイル標準ナビゲーションは、ページを変更しても document.ready を呼び出しません。考えられる解決策は 2 つあります。

  1. ドキュメント準備完了の代わりに pageinit イベントを使用します (ここで説明されているように)

     $(document).on('pageinit','[data-role=page]', function() {
    $('.green, .blue, .red').click(function(){
        var $move = $(this).closest('div[data-theme="a"]').appendTo("#summary .theListItem");
    });
});

  2. または、ドキュメント レベルでイベントをバインドし、ユーザーが移動した可能性のあるページに関係なく、アプリケーション全体に適用する必要があります (ドキュメントは jquery モバイル ajax ナビゲーションと同じままであるため)。

    $(document).on("click", ".green, .blue, .red", function(){
    var $move = $(this).closest('div[data-theme="a"]').appendTo("#summary .theListItem");
});
于 2012-12-04T14:16:25.100 に答える