Khi sử dụng phông chữ biểu tượng như FontAwesome, làm cách nào để làm cho các biểu tượng có thể được ràng buộc trong jQuery?

Question

Với Font Awesome, tôi muốn sử dụng biểu tượng biểu tượng loại bỏ. Vì vậy, tôi có <i class="icon-remove"></i> trong HTML của tôi, hoạt động hoàn hảo. Tuy nhiên, tôi muốn thực hiện điều này trong jQuery để đóng một div cho tôi.

Vì vậy, tôi đã sử dụng:

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

Tuy nhiên, điều này không làm việc. Khi tôi nhấp vào nó, không có gì xảy ra.

Đây là CSS tôi đã sử dụng (cũng lưu ý: cursor: pointer; không hoạt động).

.icon-remove { 
    display: block; 

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

Chính xác thì tôi đang làm gì sai?

Answer 1

Nếu biểu tượng được thêm động sau khi tải trang, sự kiện nhấp chuột đó sẽ không hoạt động. Bạn cần sử dụng on để thay thế.

Dưới đây là một cách để sử dụng nó:

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

Answer 2

Mã của bạn là OK. Có thể bạn có một số lỗi trong mã JavaScript đang ngăn toàn bộ hoạt động. Sử dụng Firebug trên Firefox chẳng hạn, bạn có thể kiểm tra tab Console để xem có lỗi trong mã của bạn hay không.

Đây là JS Bin để kiểm tra mã của bạn: http://jsbin.com/obogof/4

Đối với phần CSS, bạn phải chắc chắn rằng mã CSS của bạn đưa ra sau khi bất kỳ quy tắc CSS khác ảnh hưởng đến lớp .icon-remove. Nó hoạt động chính xác ở đây: http://jsbin.com/obogof/5

Answer 3

Việc thực thi javascript của bạn sau khi DOM đã sẵn sàng chưa? Bạn sẽ cần những điều sau:

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