Question

i have some jquery logic, below is the code

$(document).ready(function() {
    $('<ul class="className"><\/ul>').insertBefore('.divClassName');
    $.each(jsArray, function(key, value) {
        $('<li><input class="dynamicFilterInput" type="checkbox" checked="checked" value="' + key + '" id="filterID' + key + '" /><label for="filterID' + key + '"> ' + value + ' <\/label><\/li>').appendTo('ul.afilters');
    });
});

above code is making dynamic <ul><li></li>...</ul> and then i have ajax call and on complete i need to update that ul list,

i have function defined for ul like below

$('.ULclassName input').click(function() {
    alert("aaaaaaaaaaa");
});

this function is accessible when page load, but after my ajax call when i update ul list and click on checkbox, nothing happens, i see no alert,

how to access to $('.ULclassName input').click( function() {}); ?

Edit: this is complete call back logic in my ajax call

complete: function(){
$('ul.className').hide();

$('<ul class="className"><\/ul>').insertBefore('.divClassName');
    $.each(jsArray, function(key, value) {
        $('<li><input class="dynamicFilterInput" type="checkbox" checked="checked" value="' + key + '" id="filterID' + key + '" /><label for="filterID' + key + '"> ' + value + ' <\/label><\/li>').appendTo('ul.afilters');
    });

}

Thanks

Answer 1

You need to bind using live
Try:

$('.ULclassName input').live("click", function() {
    alert("aaaaaaaaaaa");
});

With .on:

$(document).on("click", '.ULclassName input', function() {
    alert("aaaaaaaaaaa");
});