使用 FontAwesome 等图标字体时，如何使图标在 jQuery 中可绑定？答案

【问题标题】：When using an icon font such as FontAwesome, how do I make the icons bindable in jQuery?使用 FontAwesome 等图标字体时，如何使图标在 jQuery 中可绑定？
【发布时间】：2013-02-14 01:22:05
【问题描述】：

对于Font Awesome，我想使用icon-remove 图标。所以我的 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;
}

我到底做错了什么？

【问题讨论】：

标签： jquery html css twitter-bootstrap font-awesome

【解决方案1】：

如果图标是在页面加载后动态添加的，则该点击事件将不起作用。您需要改用on。

这是一种使用方式：

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

【讨论】：

好的，在这种情况下，下一步是检查 Leniel 建议的错误，然后发布您发现的任何错误。如果您没有发现任何错误，则需要发布更多代码或提供工作演示。

【解决方案2】：

您的代码没问题。也许您的 JavaScript 代码中存在一些错误，导致整个事情无法正常工作。例如，在 Firefox 上使用 Firebug，您可以检查控制台选项卡以查看代码中是否存在错误。

这是用于测试您的代码的 JS Bin：http://jsbin.com/obogof/4

对于CSS 部分，您必须确保您的CSS 代码位于影响.icon-remove 类的任何其他CSS 规则之后。它在这里正常工作：http://jsbin.com/obogof/5

【讨论】：

没有其他规则会影响.icon-remove 类。 ://
完全有可能我只是没有正确使用控制台，但是没有，当我单击时控制台中没有出现任何内容。
Uhmm... 在控制台选项卡中打开 Firebug：重新加载整个页面。通常它会在这个时候显示错误（如果有的话）。
好的，我打开了 Firebug，刷新了页面并打开了控制台选项卡，但没有任何显示。
那么，最后一个问题：你确定你的 jQuery 链接正确吗？在 Firebug 中查看 Scripts 选项卡并打开下拉列表...在那里查找 jQuery 文件。

【解决方案3】：

你的 javascript 是在 DOM 准备好之后执行的吗？您将需要以下内容：

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

【讨论】：