Question

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

要显示手风琴中的菜单处于活动状态，我打算在手风琴中显示按钮内的FontAwesome eye icon，如下所示：http://jsfiddle.net/Vw9Z6/11/。

但是，这不起作用。 HTML会被追加，但图标不会显示。

＆＃13;

$("div#accordion").accordion({ heightStyle: "content", collapsible: true});

$("input[type=button]").button();

$("input[type=button]").click(function(){
  $(this).append($("<i class='fa fa-eye'></i>"));
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

等效小提琴：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的一个有趣的问题。

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

1 个答案: