在jQuery移動頁面中動態添加div標籤

我在做一個jQuery移動示例應用程序，在該應用程序中，我根據輸入的搜索位置在網格中（動態）檢索值。在jQuery移動頁面中動態添加div標籤

的代碼如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="style.css"/> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<link type="text/css" rel="stylesheet" href="style.css"/> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 

<script> 
$(document).ready(function() 
     { 
    $('#stoplist').hide(); 
    $('#searchstop').change(function() { 
    var searchstop=$('#searchstop').val(); 


$.ajax({ 

    type: "GET", 
    url: "BilaagValues?searchstop="+searchstop, 
    success:function (check) { 
     console.log(check); 
      var output = JSON.parse(check); 
      console.log(output); 

      $("#stoplist").show(); 
      $("#stop1").html(output.stopName); 
      $("#mailbox1").html(output.mailboxno); 
      $("#mailboxname").html(output.mailName); 
      $("#advtbox1").html(output.advtno); 
      $("#advtboxname").html(output.advtname); 
    }, 

    success:function (check1) { 
     console.log(check1); 
      var output = JSON.parse(check1); 
      console.log(output); 

      $("#stoplist1").show(); 
      $("#stop2").append(output.stopName); 
      $("#mailbox2").append(output.mailboxno); 
      $("#mailboxname1").append(output.mailName); 
      $("#advtbox2").append(output.advtno); 
      $("#advtboxname1").append(output.advtname); 

    } 
    }); 
    }); 
    }); 

</script> 
</head> 
<body> 


<div data-role="header" id="header"> 
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true" id="header"></a> 
    <h1>Ruteoversikt</h1> 
    <a href="#" data-role="button" data-theme="b" data-inline="true" id="header">Rediger</a> 
</div> 
<div> 
<input id="searchstop" placeholder = "Stop pa Navvn" /></div> 
<hr> 
    <div id="unitno">221721_0030</div> 
<hr> 
<br/> 
<hr> 
<div id="stoplist"> 
<div class="ui-grid-b" id="address1"> 
<img id="picture1" src="post1.jpg"/> 

<div id="stop1"></div><br> 

<div id="mailbox1" style="border-width: 2px; border-style: double; border-color: grey; background-color:green"></div>&nbsp &nbsp &nbsp &nbsp &nbsp <div id="mailboxname"></div> 
<div id="advtbox1" style="border-width: 2px; border-style: double; border-color: grey; "></div> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <div id="advtboxname"></div> 
</div> 
</div> 
<div id="stoplist1"> 
<div class="ui-grid-b" id="address1"> 


<div id="stop2"></div><br> 

<div id="mailbox2" style="border-width: 2px; border-style: double; border-color: grey; background-color:green"></div>&nbsp &nbsp &nbsp &nbsp &nbsp 
<div id="mailboxname1"></div> 
<div id="advtbox2" style="border-width: 2px; border-style: double; border-color: grey; "></div> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <div id="advtboxname1"></div> 

</div> 
</div> 
<hr> 
</body> 
</html> 

    Now here the problem which is arising is that I want the 2nd set of values ie. in div with id "stopList1" to be appended below the first set of values which are there in first grid. In simple terms, The values retrieved for 2nd search should be appended below the first set of values but what is happening in my case is that the next set of values are getting appended above the first set of values,,, in the same grid...!!!!

如何解決這個????

請幫助您的建議。

來源

2013-08-23 Sva

什麼問題？ – Doorknob

爲什麼你有2個成功處理程序？ – tomaroo

嘗試用添加到原始內容上的新值替換內容。 $('#stoplist1').html($('#stoplist1').html() + 'Whatever code you want here');

來源

2013-08-23 13:43:21

$（'＃stoplist1'）。append（'Whatever code you want here'）;

來源

2014-07-03 12:51:04 Anup

在jQuery移動頁面中動態添加div標籤

回答

相關問題