使用字体显示复选框

Display checkbox using Font-Awesome

本文关键字：复选框 显示 字体      更新时间：2023-09-26

使用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');}
    });

然而，当我点击复选框时，似乎什么也没有发生。建议吗?

很可能您在顶部声明的元素还没有在DOM中，所以当您绑定。click()函数时，没有什么可绑定的-您必须在将元素添加到DOM时进行绑定

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

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

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

把它放在你的两个代码块之间，它应该都工作(它为我做了)。或者把"body"换成你自己的选择器。

这里有一个小提琴显示我的意思:http://jsfiddle.net/kcuMU/1/

快乐编码::

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

对我来说，这是有效的

check.addEventListener('click', function () {........});
相关文章：