Font-Awesome을 사용하여 표시 확인란을 사용하십시오.

Question

Font-awesome을 사용하여 확인란을 표시하고 클릭 할 때 몇 가지 작업을 수행하는 간단한 javascript를 작성하려고합니다. 이것은 내가 지금까지 무엇을 가지고 :

 var check = document.createElement('i'); 
     check.className = 'icon-check-empty'; 
     check.type = 'checkbox'; 
     check.id = 'hideConfigCheck'; 

// 액션 버튼으로 클릭 (경고 및 전환 확인란 틱)

 $('#hideConfigCheck').click(function() { 
     alert('you clicked here'); 
     if($(this).hasClass('icon-check')){ 
      $(this).removeClass('icon-check').addClass('icon-check-empty');} 
     else { 
      $(this).removeClass('icon-check-empty').addClass('icon-check');} 
    }); 

그러나, 내가 체크 박스를 클릭하면, 아무 일이 보인다합니다. 제안?

Answer 1

상단에 선언 한 요소가 아직 DOM에 없기 때문에 .click() 함수를 바인딩 할 때 바인딩 할 것이 없습니다. 바인딩 할 필요가 있습니다. DOM에 요소를 추가하십시오.

document.createElement는 실제로 요소를 페이지에 배치하지 않고 단지 그것을 생성하여 나중에 사용할 수 있도록 만듭니다. 우리는 그것을 표현할 무언가가 필요합니다.

단지 몸에 추가됩니다 할 수있는 가장 간단한 것은 (또는 당신이 그것을 사용하는 곳) - 당신이 jQuery를 사용하는 경우 다음을 수행하여 두 블록의 사이에

$("body").append(check); 

넣어 코드 및 모든 작동해야합니다 (나를 위해 않았다). 또는 자신의 선택자를 "본문"으로 전환하십시오. http://jsfiddle.net/kcuMU/1/

행복 코딩 ::

이

Answer 2

귀하의 솔루션은 아마도 요소가 DOM에 추가 된 경우에만 작동합니다

여기에 내가 무슨 뜻인지 보여주는 바이올린입니다.

은 나를 위해,이

check.addEventListener('click', function() {........}); 

근무