Question

我正在使用Font Awesome图标构建JQM应用程序，如果我添加到HTML <i class=icon-XXX></i>，一切都很好。如果我通过javascript创建它，则会出现问题。它永远不会出现！

此图标位于<ul /><li />，我尝试触发“刷新”，“创建”，......但没有任何反应。

无论如何要解决这个问题？提前谢谢。

此致

PS。我也在使用bootstrap，我加载了第一个bootstrap然后FA，如FA网页中所述......

更新（简易代码......）

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>

Answer 1

我测试了下面的代码并且它正常工作，使用Font-Awesome（没有Bootstrap.js）。我还给了listview一个ID（#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();
});

通过JS添加Font Awesome图标

1 个答案: