When using an icon font such as FontAwesome, how do I make the icons bindable in jQuery?

Question

With Font Awesome, I want to use the icon-remove icon. So I have <i class="icon-remove"></i> in my HTML, which works perfectly. However, I wanted to make this bindable in jQuery to close a div for me.

So I used:

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

However, this doesn't work. When I click it, nothing happens.

This is the CSS I've used (also of note: cursor: pointer; doesn't work).

.icon-remove {
    display: block;

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

What exactly am I doing wrong?

Answer 1

If the icon was added dynamically after page load, that click event won't work. You need to use on instead.

Here's one way of using it:

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