无法在jQuery UI按钮内动态附加FontAwesome图标

Question

在我的项目中，我有一个jQuery UI手风琴，每个部分都有几个按钮。单击这些按钮后，我正在通过AJAX将数据加载到另一个<div>。

为了显示手风琴内部的菜单处于活动状态，我计划在手风琴按钮的内部显示FontAwesome眼睛图标，如下所示：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元素。

因此，如果您想让它正常工作，我建议您使用按钮（也许您需要查看输入要达到的目标）。

一个非常简单和工作小提琴这里。

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” /> 此。