0

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

但是，当我单击复选框时，似乎没有任何反应。建议？

4

2 回答 2

2

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

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

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

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

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

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

快乐编码::

于 2013-06-19T23:18:12.930 回答
0

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

对我来说，这行得通

check.addEventListener('click', function () {........});
于 2013-06-20T14:43:37.383 回答