jQuery UI 버튼 안에 FontAwesome 아이콘을 동적으로 추가 할 수 없습니다.

Question

제 프로젝트에는 jQuery UI 어코디언과 각 섹션에 몇 개의 버튼이 있습니다. 이 버튼을 클릭하면 AJAX를 통해 데이터가 다른 <div>에로드됩니다. http://jsfiddle.net/Vw9Z6/11/ :

는, 나는 아코디언이 뭔가를 버튼의 내부 FontAwesome eye icon을 보여줄 계획입니다 메뉴 내부 아코디언이 활성화 된 것을 표시합니다.

그러나 이것은 작동하지 않습니다. 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 요소에 추가 할 수 없다는 것입니다.

그래서 당신이 그것을 원한다면 나는 당신이 버튼을 사용할 것을 제안 할 수있다. (아마 당신은 입력으로 무엇을 달성하려고하는지 검토 할 필요가있다.)

아주 간단하고 작동하는 바이올 here.

HTML :

<div> 
    <button>Lorem</button> 
    <button>Ipsum</button> 
</div> 

자바 스크립트 :

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