call a javascript function within dynamically created html

Question

I have a javascript file as you'll see in picture below .
In this file i create a html code for my webpage , And In this html i call a function defined in the javascript file . But when i run it i get that the function isn't defined .
additional info :

plus the function mentioned ("cButton") is defined in another function inside the javascript file.

(function () {
    var thecid = 0;

    function cButton (ii) {
        document.getElementById(ii).style.display = 'none';
        alert('fdgfg');
    }

    $("#subber").on("click", function () {
        var thelm = "#c0"+thecid;
        var newcommhtml = '<div id="c0' + thecid + '" class="cnew clearfix">';
        var ii='c0'+thecid;
        newcommhtml += '<section class="c-content">';
        newcommhtml += '<a href="#" onclick="cButton(\'' + ii + '\');" style="color:black;">x</a>';
        newcommhtml += '<p>' + nl2br(textval) + '</p> </section></div>';        
    });
})()

Answer 1

For the onclick to work, you need your cButton() to be accessible globally as a property of the global window object.

Change you code to:

window.cButton = function(ii) {
   ...
}

Answer 2

The problem is that you are defining cButton inside the document ready handler, so it doesn't exist outside that. If you declare the function outside then things can access it later...

function cButton(ii){
    document.getElementById(ii).style.display = 'none';
    alert('fdgfg');
}

(function(){
    var thecid = 0;
    $("#subber").on("click", function(){
        var thelm = "#c0"+thecid;
        var newcommhtml = '<div id="c0'+thecid+'" class="cnew clearfix">';
        var ii='c0'+thecid;
        newcommhtml += '<section class="c-content">';
        newcommhtml += '<a href="#" onclick="cButton(\''+ii+'\');" style="color:black;">x</a>';
        newcommhtml += '<p>'+nl2br(textval)+'</p> </section></div>';        
    });
})()