无法在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。