При втором использовании JQuery ajax для получения локального содержимого .HTML, js файла index.html недействителен - PullRequest
0 голосов
/ 13 марта 2012

Прошу прощения за мой плохой английский ...

Сейчас я занимаюсь разработкой телефонной пропасти. Я хочу использовать JQuery ajax для получения локального содержимого .HTML и вставки этого содержимого в div с помощью id = "next-page" в index.html. И первый раз, когда я нажимаю на btn, все в порядке. Но когда
во второй раз, когда я нажимаю btn, можно перейти на страницу, но класс списка просмотра запросов li отсутствует. Я думаю, что это недопустимые jquery.js и jquery-mobile.js. Может кто-нибудь мне помочь? Спасибо!

Это мой index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>demo</title>
<link rel="stylesheet"  href="jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/chui.css"/>
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>
<body>
<!--home page:schedule-->
<div data-role="page" id="schedule">
    <div data-role="header" data-theme="b"></div>

<div id="wrapper1">
    <div id="scroller">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="d" class="ulspan">
                <li><a id="first-btn">Carrier<span></span></a></li>
            </ul> 
         </div>
     </div>
</div>
</div>


<div data-role="page" id="next-page">

</div>

Это мой other.html

<div data-role="header" data-theme="b">
    <a onClick="showCarrier()" data-corners="false" class="navbar-btn back-btn" style="border-radius:5px;left:18px;" data-rel="back">Back</a>

</div>
<div id="wrapper2">
    <div id="scroller">
        <div data-role="content">
            <ul data-role="listview" id="carrier" data-theme="d">
               <li><a><span>AAAAAAAAAAAAAAAAA</span></a></li>
               <li><a><span>BBBBBBBBBBBB</span></a></li>
               <li><a><span>AAAAAAAAAAAAAAAAA</span></a></li>
               <li><a><span>BBBBBBBBBBBB</span></a></li>
               <li><a><span>AAAAAAAAAAAAAAAAA</span></a></li>
            </ul>
        </div>
    </div>
</div>

Это метод Response при нажатии кнопки «first-btn».

$.ajax({
           url:"carrier.html",
           async:true,
           type:'Get',
           dataType:'html',
           timeout:5000,
           error:function(data){showAlert('Error loading data')},
           success:function(data){
           console.log(data);
           $("#next-page").html(data);
           $.mobile.changePage($("#next-page"),{transition:"slide"});
   })

1 Ответ

0 голосов
/ 13 марта 2012

Я не уверен, что правильно понимаю.Вы говорите, что во второй раз, когда вы нажимаете кнопку, на странице отображается содержимое вызова AJAX, но оно неправильно отформатировано?

Если это так, возможно, вам нужно позвонить

$('#carrier').listview('refresh');

после динамического введения нового списка просмотра ul.

При этом существуют другие проблемы с вашим подходом, но вышеизложенное должно исправить вашу непосредственную проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...