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

Question

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

为了显示手风琴中的 menu 是活动的，我打算显示 FontAwesome eye icon inside of the button in the accordian, something like this: 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 的有趣问题。

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

Unable to append FontAwesome icon dynamically inside jQuery UI button

jquery

jquery-ui

accordion