javascript - 使用 Font-Awesome 显示复选框

Question

使用 Font-awesome，我正在尝试编写一个简单的 javascript，它显示一个复选框并在单击时执行一些操作。这是我到目前为止所拥有的:

      var check = document.createElement('i');
      check.className = 'icon-check-empty';
      check.type = 'checkbox';
      check.id = 'hideConfigCheck';

//点击操作(警报和切换复选框勾选)

      $('#hideConfigCheck').click(function () {
        alert('you clicked here');
        if($(this).hasClass('icon-check')){
            $(this).removeClass('icon-check').addClass('icon-check-empty');}
        else {
            $(this).removeClass('icon-check-empty').addClass('icon-check');}
    });

但是，当我单击该复选框时，似乎什么也没有发生。有建议吗？

Answer 1

可能您在顶部声明的元素尚未在 DOM 中，因此当您绑定(bind) .click() 函数时，没有任何可绑定(bind)的内容 - 您必须在添加时进行绑定(bind)元素到 DOM

document.createElement 实际上并没有将元素放在页面上，它只是创建它以便我们可以使用它并稍后渲染它。我们需要一些东西来渲染它。

最简单的事情就是附加到正文(或任何您使用它的地方) - 如果您使用 JQuery，请执行以下操作:

$("body").append(check);

将其放在两个代码块之间，它应该可以正常工作(对我来说是这样)。或者为您自己的选择器切换“body”。

这是一个 fiddle ，显示了我的意思:http://jsfiddle.net/kcuMU/1/

快乐编码::