FontAwesome과 같은 아이콘 글꼴을 사용할 때 jQuery에서 아이콘을 어떻게 묶을 수 있습니까?

Question

Font Awesome으로, 아이콘 - 제거 아이콘을 사용하고 싶습니다. 그래서 내 HTML에 <i class="icon-remove"></i>이 있는데 완벽하게 작동합니다. 그러나 jQuery에서 div를 닫아 바인드 할 수있게하려고했습니다.

그래서 내가 사용 :

$(".icon-remove").click(function() { 
     alert("HELLO"); 
     $(".login-window").hide(); 
     $(".register-window").hide(); 
     $(".shadow").hide(); 
    }); 

그러나이 작동하지 않습니다. 그것을 클릭해도 아무 일도 일어나지 않습니다.

이것은 내가 사용했던 CSS입니다 (참고 : cursor: pointer;도 작동하지 않습니다).

.icon-remove { 
    display: block; 

    color: #444; 
    cursor: pointer; 
    float: right; 
    margin-right: 15px; 
} 

정확히 내가 잘못 뭐하는 거지

?

Answer 1

페이지로드 후 아이콘이 동적으로 추가 된 경우 해당 클릭 이벤트가 작동하지 않습니다. 대신 on을 사용해야합니다.

$(document).on("click", ".icon-remove", function() { 
    alert("HELLO"); 
    $(".login-window").hide(); 
    $(".register-window").hide(); 
    $(".shadow").hide(); 
}); 

Answer 2

귀하의 코드는 OK입니다 :

는 여기를 사용하는 하나의 방법입니다. 어쩌면 모든 것을 작동하지 못하게하는 JavaScript 코드에 오류가있을 수 있습니다. Firefox에서 Firebug를 사용하여 예를 들어 Console 탭에서 코드에 오류가 있는지 확인할 수 있습니다.

가 여기에 JS 빈은 코드 테스트의 다음 CSS의 경우 http://jsbin.com/obogof/4

을, 당신은 당신의 CSS 코드가 .icon-remove 클래스에 영향을 미치는 다른 CSS 규칙 다음에 오는 있는지 확인해야합니다. 올바르게 작동합니다 : http://jsbin.com/obogof/5

Answer 3

DOM 준비가 완료되면 자바 스크립트가 실행됩니까? 다음이 필요합니다.

$(document).on("click", ".icon-remove", function() { 
    alert("HELLO"); 
    $(".login-window").hide(); 
    $(".register-window").hide(); 
    $(".shadow").hide(); 
});