Question

我有一些从javascript插件动态生成的。它创建了一些带有类.someclass的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>

Answer 1

我想你想要：

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

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

表单为$(parentElementSelector).on(event, triggerElementSelector, handler);

您可以在http://api.jquery.com/on/

阅读API

<强>更新：

正如A. Wolff所指出的，你真的不需要等待加载DOM。您只需使用document作为父元素选择器：

$(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');
        }
    });
});

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

1 个答案: