Javascript 将事件附加到动态创建的元素

我有一些动态生成的javascript插件。它使用class

.someclass

创建一些div，这些div封装了一些现有div。我想给

.someclass

子类添加一些类。所以我把

$(document).ready('.icheckbox',function(){
            if($(this).children().first().hasClass('checked')){
                console.log('test');
            }
        })

但是控制台没有显示任何内容。所以我试过了

$('body').on('.icheckbox',function(){
            if($(this).children().first().hasClass('checked')){
                console.log('test');
            }
        })

但它也不起作用。有人能帮忙吗

编辑：以下是

html

代码：

<div class="controls">
                    <input type="checkbox" name="notif_user_like" id="notif_user_like" class="checkbox checked" value="1" /> <label for="notif_user_like" class="checkboxLabel">some text</label>
                </div>

一些文本

下面是javascript处理后代码的转换方式：

<div class="controls">
                    <div class="icheckbox" style="position: relative;"><input type="checkbox" name="notif_user_like" id="notif_user_like" class="checkbox checked" value="1" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins></div> <label for="notif_user_like" class="checkboxLabel">some text</label>
                </div>

一些文本

我想您需要：

$(document).ready(function () {
    $('body').on('change', '.icheckbox', function (e) {
        if ($(this).children().first().hasClass('checked')) {
            console.log('test');
        }
    });
});

方法上的

用于事件处理的委托，这是动态添加元素所需的，因为绑定处理程序时这些元素可能不存在

表单是
$（parentElementSelector）.on（事件，triggerElementSelector，处理程序）

您可以在以下位置阅读API：

更新：

正如所指出的，您实际上不需要等待DOM加载。您只需使用
文档
作为父元素选择器：

$(document).on('change', '.icheckbox', function (e) {
    if ($(this).children().first().hasClass('checked')) {
        console.log('test');
    }
});

$(document).ready(function () {
    $('.controls').on('change', '.icheckbox', function (e) {
        if ($(this).children().first().hasClass('checked')) {
            console.log('test');
        }
    });
});

一种[也许]更好的方法（我通常在自己的项目中实现）是使用更接近的祖先作为父元素选择器：

$(document).on('change', '.icheckbox', function (e) {
    if ($(this).children().first().hasClass('checked')) {
        console.log('test');
    }
});

$(document).ready(function () {
    $('.controls').on('change', '.icheckbox', function (e) {
        if ($(this).children().first().hasClass('checked')) {
            console.log('test');
        }
    });
});

首先，没有“文档”标签。您是幸运的伪就绪事件，可以对任何对象触发，即使是空对象。其次，我认为您需要：
$（'body'）。在（'change'，'.icheckbox'，function（）{…}）
可以发布html结构吗？另外，它应该是
$（document）。准备好了吗
注意删除了document周围的引号
上的
的语法是.@A.Wolff您是对的。@mituw16对不起，这是一个输入错误，+1 Op可以委托给文档，而不必等待DOM就绪，或者更好地使用最接近的静态容器作为文档就绪处理程序中的委托级别。OP应该以任何方式读取DOC，不需要等待DOM就绪。出于习惯键入它。对于绑定到body，您仍然必须等待body在DOM中出现，所以不能将代码放在HEAD部分，所以您的答案是准确的。我说的是在任何情况下都可用的文件