0

所以我正在使用 jQuery mobile，我试图将一个项目从一个列表移动到另一个列表。我有这个：

$('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。我看到两种可能的解决方案：

  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 回答