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

Why a picture of the code instead of the code itself??

techfoobar
– techfoobar

2014-03-06 09:36:54 +00:00
Commented Mar 6, 2014 at 9:36 — techfoobar
– techfoobar, Commented Mar 6, 2014 at 9:36
Please put code instead of picture

Vicky Gonsalves
– Vicky Gonsalves

2014-03-06 09:37:24 +00:00
Commented Mar 6, 2014 at 9:37 — Vicky Gonsalves
– Vicky Gonsalves, Commented Mar 6, 2014 at 9:37
sorry i thought its more comfortable

saeed hardan
– saeed hardan

2014-03-06 09:37:29 +00:00
Commented Mar 6, 2014 at 9:37 — saeed hardan
– saeed hardan, Commented Mar 6, 2014 at 9:37

techfoobar · Accepted Answer · 2014-03-06 09:38:21Z

6

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

answered Mar 6, 2014 at 9:38

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saeed hardan Over a year ago

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

Reinstate Monica Cellio · Accepted Answer · 2014-03-06 09:40:58Z

1

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

answered Mar 6, 2014 at 9:40

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

2 Comments

saeed hardan Over a year ago

this worked thank u , but i had to accept techfoobar answer cause its shorter :)

Reinstate Monica Cellio Over a year ago

No worries - glad you got it sorted. I just wanted to explain further :)

Collectives™ on Stack Overflow

call a javascript function within dynamically created html

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related