Question

Is there a way to keep checking an object if it’s checked after it is replaced

this illustrates the problem I’m having

http://jsfiddle.net/nr6eA/

once the element is replaced the change function is not triggered again, while I have a pretty good idea why this is happening, I’m not sure how to solve this.

I’ve got a lot of checkboxes, and adding a script to each when they are replaced doesn’t seem to be the best idea.

Is there a way of re-initializing the jquery function ofter an ajax update?

Answer 1

You need event delegation. For that purpose you can use on() with jQuery 1.7+ like below:

For .on():

$(document).ready(function() {
    $('#f').on('change', ' input:checkbox', function() {
        $('#textbox1').val($(this).attr('id') + " " + $(this).is(':checked'));
        $(this).replaceWith('<input type="checkbox" id="checkbox1" class="ichange"/>')
    });
});​

But, your fiddle shows jQuery 1.6.2. In that case you can use live() or delegate().

For live():

$(document).ready(function() {
    $('#f input:checkbox').live('change', function() {
        $('#textbox1').val($(this).attr('id') + " " + $(this).is(':checked'));
        $(this).replaceWith('<input type="checkbox" id="checkbox1" class="ichange"/>')
    });
});​

And for delegate():

$(document).ready(function() {
    $('#f').delegate('input:checkbox', 'change', function() {
        $('#textbox1').val($(this).attr('id') + " " + $(this).is(':checked'));
        $(this).replaceWith('<input type="checkbox" id="checkbox1" class="ichange"/>')
    });
});​

But it would be better if you can use .on() with jQuery 1.7+.