Question

所以我正在使用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>

非常感谢

Answer 1

当您更改页面时，jQuery移动标准导航不会调用document.ready。我看到两种可能的解决方案：

使用pageinit事件代替文档就绪（如here所述）

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

或者，您可以在文档级别绑定您的事件，它们应该应用于整个应用程序，无论用户可能导航到哪个页面（因为文档与jquery mobile ajax导航保持相同）
```
$(document).on("click", ".green, .blue, .red", function(){
    var $move = $(this).closest('div[data-theme="a"]').appendTo("#summary .theListItem");
});
```

怎么来.appendTo在一个页面而不是另一个页面上工作？

1 个答案: