Podczas korzystania z czcionki ikony, takiej jak FontAwesome, w jaki sposób ustawić ikony wiążące w jQuery?

Question

Z ikoną Font Awesome chcę użyć ikony--remove-. Więc mam <i class="icon-remove"></i> w moim HTML, który działa idealnie. Jednak chciałem uczynić to bindable w jQuery, aby zamknąć div dla mnie.

Więc użyłem:

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

Jednak to nie działa. Kiedy klikam, nic się nie dzieje.

To jest CSS, którego użyłem (również uwaga: cursor: pointer; nie działa).

.icon-remove { 
    display: block; 

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

Co dokładnie robię źle?

Answer 1

Jeśli ikona została dodana dynamicznie po wczytaniu strony, to zdarzenie kliknięcia nie będzie działać. Zamiast tego należy użyć on.

Oto jeden ze sposobów korzystania z niej:

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

Answer 2

Kod jest OK. Być może masz błąd w kodzie JavaScript, który uniemożliwia działanie. Używając Firebug na przykład w Firefoksie, możesz sprawdzić kartę Konsola, aby sprawdzić, czy w Twoim kodzie wystąpił błąd.

Oto JS Bin przetestować swój kod: http://jsbin.com/obogof/4

Dla CSS strony, trzeba mieć pewność, że Twój kod CSS przychodzi po innych reguł CSS, które wpływają na klasę .icon-remove. Działa poprawnie tutaj: http://jsbin.com/obogof/5

Answer 3

Czy Twój javascript działa po zakończeniu DOM? Będziesz potrzebował:

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