js dynamically created checkbox on click function not defined

Question

I'm creating a checkbox dynamically and when the onclick function is executed I'm getting 'the function is undefined' error in the console. In stepping through, the code is read during the page load event but on click the error is thrown. I've tried loading the function into $(document).ready(); but get the same error:

*these functions are inside a function that's called on page load. 'chkBox' is the undefined function

function lyrBuild(lyrVar, lyrName) {
    $('<li>').attr({
        id: lyrVar.liID,
        class: 'layer'
    }).html($('<input>').attr({
        id: lyrVar.cbID,
        type: 'checkbox',
        onClick: "chkBox(" + "'" + lyrVar.liID + "'" + ")",
        checked: 'unchecked',
        name: lyrVar.Name,
        value: lyrVar.val
    })).appendTo('#layersList');
}

function chkBox(lyrId) {
    //switch statement goes here
} 

Answer 1

Try declaring the dhkBox function like:

var chkBox = function(lyrId) {
    //switch statement goes here
}

Answer 2

You had no question but I give you an answer anyway ;)

"these functions are inside a function", which means that chkBox is not available when you call it that way. Use .click() , doc here , or .on() , or place chkBox outside the function, if possible.