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

Question

With the Awesome font , I want to use the icon-remove icon. Thus, I have <i class="icon-remove"></i> in my HTML, which works fine. However, I wanted to make it bindable in jQuery to close the div for me.

So, I used:

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

However, this does not work. When I click on it, nothing happens.

This is the CSS I used (also 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 the page loaded, this click event will not work. You need to use on .

Here is one way to use it:

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

Answer 2

Your code is ok. Perhaps you have some error in your JavaScript code that prevents all of this from working. For example, using Firebug for Firefox, you can check the Console tab to see if there is an error in your code.

Here JS Bin checks your code: http://jsbin.com/obogof/4

For the CSS part, you need to be sure that your CSS code appears after any other CSS rules that affect the .icon-remove class. Here it works correctly: http://jsbin.com/obogof/5

Answer 3

Is your javascript executed after the DOM? You will need the following:

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