2

I'm building JQM app using Font Awesome icons and all is fine if I add into HTML <i class=icon-XXX></i>. The problem appears if I create it through javascript. It never appears!

This icon is into a <ul /><li />and I've tried triggering "refresh", "create", ... but nothing happens.

Is there anyway to solve this? Thanks in advance.

Regards,

PS. I'm using bootstrap also and I load first bootstrap and then FA as says in FA webpage...

UPDATE (Easy code...)

JS

var elemHtml = "" +
"<div data-type=\"tlf\" id=\"XXX\">
    <ul data-role=\"listview\" data-inset=\"true\" data-theme=\""+selectedTheme+"\">
        <li data-icon=\"false\">
            <a href=\"tel:600123456\"><i class=\"icon-phone\"></i>600123456</a>
        </li>
    </ul>
</div>";

$("#screen").contents().find("#screenBody").append(elemHtml);

JSP

<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="resources/css/font-awesome.min.css" />

<div id="screen">
    <div id="screenBody"></div>
</div>
4

1 に答える 1

2

以下のコードをテストしたところ、Font-Awesome (Bootstrap.js なし) を使用して正常に動作しました。listviewID（ ）も付けました#listviewtest。

$(document).on('pagebeforeshow', function(){
 var elemHtml = 
  "<div data-type='tlf'>"
  + "<ul data-role='listview' data-inset='true' data-theme='' id='listviewtest'>"
   + "<li data-icon='false'><a href='tel:600123456'>"
   + "<i class='icon-phone'></i>600123456</a>"
   + "</li>"
   + "<li data-icon='false'><a href='tel:600123456'>"
   + "<i class='icon-remove-sign'></i>600123456</a>"
   + "</li>"
  + "</ul>"
  + "</div>";
 $("div[data-role='content']").append(elemHtml); // append to data-role='content'
 $('#listviewtest').listview();
});
于 2013-03-19T13:36:26.483 に答える