Change event not firing for checkbox in Chrome extension

Question

I am creating a chrome extension where I am dynamically creating the checkbox. Now in document ready I have placed the code to handle the "checked" change event of checkbox but the code is not working as expected because am not getting any alerts when i click it.

Creating dynamic checkbox:

function createExtensionUI(extensionListArray){
var bkg = chrome.extension.getBackgroundPage();

    var extensionLength = extensionListArray.length;

    for(var i=0; i<extensionLength; i++){

        var extensionObject = extensionListArray[i];
        if(extensionObject.type == "extension"){        
            var checkbox = '<label><input type="checkbox" class= "extensionbox" id= ' + extensionObject.id  + '/>'+extensionObject.shortName+'</label>';
            $('#extensionList').append(checkbox);
            bkg.console.log(checkbox);
        }
    }

}

dynamic checkbox html code sample:

 <label><input type="checkbox" class= "extensionbox" id= "llegcghmokaemodgdddnchiijfdbfnlg"/>Coremetrics Bar for Chrome</label>

Code for change event:

$(document).ready(function(){

    chrome.management.getAll(getExtensionList);

    $("input[type=checkbox]").change(function() {
        alert('hello');
    });


});

Am not getting any "hello" alert. My UI for extension is coming properly.

I have tried the following but they also didn't worked:

$("input[type=checkbox]").change
$(".extensionbox").change

I am using jquery version 1.11.1

Answer 1

I believe the problem lies in asynchronous execution. Hard to say for sure without your getExtensionList code though.

You apparently create your elements from getExtensionList, which gets executed after the rest of $(document).ready, so your listeners do not attach because DOM elements don't exist yet.

To fix, move the code that attaches listeners to the end of createExtensionUI, it belongs there logically anyway.