簡體   English   中英

使用ajax + jquery mobile添加html元素

[英]Adding html element with using ajax + jquery mobile

所有。 我有一個ajax和jquery-mobile加載問題。

  api = 
    update: ->
    console.log "updated"
    $.ajax
      dataType: "jsonp"
      url: "http://localhost:3004/videos.json"
      success: (data) =>
        if data
          data.forEach (elem) =>
            video_id = elem.video_id
            embed_id = elem._id
            $("#play_list").append "
            <ul data-role='listview' data-theme='a'>
              <li>hello</li>
              </ul>
             "
   t = api.update()

而且我嘗試將此代碼插入html文件。

  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="bootstrap/css/bootstrap.responsive.css" rel="stylesheet"/>
  <body>
   <div id="play_list"></div>
  </body>
<script>
 head.js(
 "lib/jquery.js",
 "lib/jquery.mobile-1.0.1.min.js",
 "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.6/underscore-min.js", 
 "http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js", 
 "http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js",
  "app.js"
 );
</script>
</html>

輸出的html代碼是

<ul data-role='listview' data-theme='a'>
 <li>hello</li>
</ul>

但這不是通過jquery-mobile style格式化的。 它只是輸出普通的html樣式。 我想輸出如下圖http://brooky.cc/wp-content/uploads/2011/04/list_view1.png

請幫忙。

提前致謝。

精美的手冊中

調用listview插件

您可以在任何選擇器上直接調用listview插件,就像任何jQuery插件一樣:

 $('#mylist').listview(); 

程序啟動時,庫會自動在頁面上的所有列表上調用listview() ,而AFAIK基本上是這樣做的:

$('[data-role=listview]').listview();

如果添加新列表,則只需對其進行.listview()

success: (data) =>
  if data
    data.forEach (elem) =>
      video_id = elem.video_id
      embed_id = elem._id
      ul = $("
        <ul data-role='listview' data-theme='a'>
          <li>hello</li>
        </ul>
      ")
      $("#play_list").append ul
      ul.listview()

演示: http//jsfiddle.net/ambiguous/pMF4G/

您也可以一次將它們全部添加:

success: (data) =>
  if data
    uls = $()
    data.forEach (elem) =>
      video_id = elem.video_id
      embed_id = elem._id
      uls = uls.push("
        <ul data-role='listview' data-theme='a'>
          <li>hello</li>
        </ul>
      ")
    $("#play_list").append uls
    uls.listview()

演示: http//jsfiddle.net/ambiguous/BdqeC/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM