Unable to append FontAwesome icon dynamically inside jQuery UI button

Question

In my project, I have a jQuery UI accordian and few buttons in each section. On click of these buttons I am loading data via AJAX into another <div>.

To show what menu inside accordian is active, I am planning to show the FontAwesome eye icon inside of the button in the accordian, something like this: http://jsfiddle.net/Vw9Z6/11/.

However, this is not working. The HTML gets appended but the icon doesnt show up.

$("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>

Equivalent fiddle: http://jsfiddle.net/d6mSA/424/

How do I get this working?

Also, what would be the best way to set this up so that when another button is clicked, the eye icon moves over to that button?

score 5 · Accepted Answer · edited May 23 '17 at 10:27

5

The issue here is that you can't append the i element to an input element.

So if you want to have it working i could suggest you to use buttons (perhaps you need to review what are you trying to achieve with the inputs).

A very simple and working 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();
});

An interesting question about <button> vs. <input type=“button” /> here.

edited May 23 '17 at 10:27

Community

1
1

answered Feb 06 '15 at 17:13

Leandro Carracedo

7,233
2
44
50

That looks good! Actually the `` is coming from CKEditor. Any idea how to change that dynamically? – Rahul Desai Feb 06 '15 at 17:19
I am not familiar with CKEditor, maybe you could ask another question to find out if it's possible to generate a simple html button element. – Leandro Carracedo Feb 06 '15 at 17:43
1

I ended up writing a [script to convert `` to ` – Rahul Desai Feb 07 '15 at 10:18

Unable to append FontAwesome icon dynamically inside jQuery UI button

1 Answers1