無法在jQuery UI按鈕中動態添加FontAwesome圖標

Question

在我的項目中，我有一個jQuery UI手風琴和每個部分中的幾個按鈕。點擊這些按鈕後，我通過AJAX將數據加載到另一個<div>。

要顯示什麼菜單內手風琴是積極的，我計劃顯示按鈕裏面的FontAwesome eye icon的手風琴，是這樣的：http://jsfiddle.net/Vw9Z6/11/。

但是，這是行不通的。 HTML被追加，但圖標不顯示。

$("div#accordion").accordion({ heightStyle: "content", collapsible: true}); 
 

 
$("input[type=button]").button(); 
 

 
$("input[type=button]").click(function(){ 
 
    $(this).append($("<i class='fa fa-eye'></i>")); 
 
});

input[type="button"]{ 
 
    display: block; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 

 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" /> 
 

 

 
<div id="accordion"> 
 

 
    <h3><a href="#">Section 1</a></h3> <!-- consider just this section --> 
 

 
    <div> 
 
    <input type="button" value="Lorem" /> 
 
    <input type="button" value="Ipsum" /> 
 
    </div> 
 
    <h3><a href="#">Section 2</a></h3> 
 

 
    <div> 
 
    <p>Section 2 Content</p> 
 
    </div> 
 
    <h3><a href="#">Section 3</a></h3> 
 

 
    <div> 
 
    <p>Section 3 Content 
 
     <br />Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections. 
 
     <br /><a href="http://huwshimi.com/comic/"><img src="http://dotnet.tech.ubc.ca/CourseWiki/images/a/a5/You_must_be_this_tall.png" style="border:none;width:300px"/></a> 
 

 
    </p> 
 
    </div> 
 
    <h3><a href="#">Section 4</a></h3> 
 

 
    <div> 
 
    <p>Section 4 Content 
 
     <br />Thanks for reading all four sections.</p> 
 
    </div> 
 
</div>

等效小提琴：http://jsfiddle.net/d6mSA/424/

我如何得到這個工作？

另外，設置此項的最佳方法是什麼，以便在單擊另一個按鈕時，眼睛圖標將移動到該按鈕上？

Answer 1

這裏的問題是，您不能將i元素附加到input元素。

所以，如果你想讓它工作，我可以建議你使用按鈕（也許你需要審查你試圖用輸入實現什麼）。

一個非常簡單和工作的小提琴here。

HTML：

<div> 
    <button>Lorem</button> 
    <button>Ipsum</button> 
</div> 

的Javascript：

$("div#accordion").accordion({ heightStyle: "content", collapsible: true}); 

$("button").button(); 

$("button").click(function(){ 
    $(this).append($("<i class='fa fa-eye'></i>")).button(); 
}); 

一個有趣的問題有關<button>與<input type=「button」 />here。