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

Question

I have some dynamically generated from a javascript plugin. It creates some divs with class .someclass which wraps some existing divs. I want to add some class to .someclass children. So I put

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

but the console shows nothing. So I tried

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

but it doesn't work either. Someone could help ?

Edit : here's the html code :

<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>

and here's how the code turns into after the javascript was processed :

<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

I think you want:

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

The on method is used for delegation of event handling, which is what you want for dynamically added elements as they may not exist when the handler is bound.

The form is $(parentElementSelector).on(event, triggerElementSelector, handler);

You can read the API at http://api.jquery.com/on/

UPDATE :

As pointed out by A. Wolff , you don't really need to wait for the DOM to be loaded. You can simply use document as the parent element selector:

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

A [perhaps] better method (and one I typically implement in my own projects) is to use a closer ancestor as the parent element selector:

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