Question

When appending HTML from a JSON reply, the event handlers appear to lose their event bindings. In using the .live() function the handler now appears to work.

$.each(result[0], function(i,wellList) {
    $jsonResult = wellList["@name"];
    $uid = wellList["@uid"];
    $dynamicCheckBoxDiv += '<input type="checkbox" name="checkbox-1" value="'+ $uid
        + '" class="wellCheck" id="checkbox-'+i+'" />' +
        '<label for="checkbox-'+i+'">' + $jsonResult + '</label>';              
});
$dynamicCheckBoxDiv += '</fieldset></div>';

//Append results to div
$("#dynamicCheck").append($dynamicCheckBoxDiv).page();

$(".wellCheck").live('click', (function() {

This event now fires when the click function is run. However, after clicking the checkbox a few times, it randomly associates the checks with the wrong boxes and starts to fire the click event fire on a single click. Has anyone seen this before?

Also: How could I add a method to check all the boxes in a separate button? Since they are being added dynamically it seems to just bypass this function:

// When select No wells is clicked this method is run
$('#selectNone').click(function() {
    $('#dynamicCheck .wellCheck').find(':checkbox').attr('checked', 'checked');
});

It enters the method, but doesnt seem to check any of the boxes. I have jQuery and jQuery mobile added to this page and both methods exist under document.ready.

Answer 1

You don’t need to find(":checkbox") since the .wellCheck element is the checkbox. Just do this:

$("#selectNone").click(function(){
    $("#dynamicCheck .wellCheck").prop("checked", true);
});

Demo.