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

Question

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

为了显示 Accordion 内的菜单处于事件状态，我计划显示 FontAwesome eye icon Accordion 按钮内部，如下所示: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>

等效 fiddle :http://jsfiddle.net/d6mSA/424/

我如何让它工作？

此外，最好的设置方法是什么，以便当单击另一个按钮时，眼睛图标移动到该按钮？

Answer 1

这里的问题是您无法附加 i元素到 input元素。

因此，如果您想让它正常工作，我可以建议您使用按钮(也许您需要检查您想要通过输入实现什么目标)。

一个非常简单且有效的 fiddle 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 .