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 :

http://s8.postimg.org/nqwv1na6d/js_function.png

http://s1.postimg.org/mqyu5zalr/js_function.png

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>'; 
 });
})()

• techfoobar: Why a picture of the code instead of the code itself??
• Vicky Gonsalves: Please put code instead of picture
• saeed hardan: sorry i thought its more comfortable

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) {
 ...
}

• saeed hardan: yeah it is thank u very much, actually what Archer suggested also worked but i prefer this answer cause its shorter .

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>'; 
 });
})()

• saeed hardan: this worked thank u , but i had to accept techfoobar answer cause its shorter :)
• Reinstate Monica Cellio: No worries - glad you got it sorted. I just wanted to explain further :)