CODEWITHSUNDEEP
javascriptjquerygoogle-chromecheckboxgoogle-chrome-extension
RanRag
RanRag

Reputation: 49597

Change event not firing for checkbox in Chrome extension

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

Upvotes: 4

Views: 998

Answers (1)

Xan
Xan

Reputation: 77591

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.

Upvotes: 2

Related Questions