使用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中，所以当你绑定.click（）函数时，没有什么可以绑定 - 当你添加元素时你必须做绑定DOM

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

最简单的事情就是附加到正文（或者你正在使用它的任何地方） - 如果你正在使用JQuery，请执行以下操作：

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

把它放在你的两个代码块之间，它应该都可以工作（它为我做了）。 或者为自己的选择器切换“body”。

这是一个显示我的意思的小提琴： http ： //jsfiddle.net/kcuMU/1/

快乐编码::

Answer 2

您的解决方案可能仅在元素已附加到DOM时才有效。

对我来说，这很有效

check.addEventListener('click', function () {........});