在运行时从innerHtml中添加并调用javascript函数

Question

I am using dotnet.highcharts to create a chart at runtime:

I use an ajax call an receive formatted html as a result. This is what I get back:

<div id='bbb55283bfc3440a96c7ae26e130173f_container'></div><script type='text/javascript'>
var bbb55283bfc3440a96c7ae26e130173f;
function TestFunction() {
    bbb55283bfc3440a96c7ae26e130173f = new Highcharts.Chart({
        chart: { renderTo:'bbb55283bfc3440a96c7ae26e130173f_container', defaultSeriesType: 'line' }, 
        title: { text: 'Test' }, 
        xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, 
        series: [{ data: [12, 23, 1, 9, 34, 54] }]
    });
}
</script>

Now I am putting this inside a div element (where data is the above snippet):

$(myDiv).innerHtml = data;

Next I need to call the function TestFunction()

How can I do that? It lives inside myDiv like this:

<div id="chartContainer" style="float:left">
    <div id="bbb55283bfc3440a96c7ae26e130173f_container"></div>
    <script type="text/javascript">
      var bbb55283bfc3440a96c7ae26e130173f;
      function TestFunction() {
        bbb55283bfc3440a96c7ae26e130173f = new Highcharts.Chart({
            chart: { renderTo: 'bbb55283bfc3440a96c7ae26e130173f_container', defaultSeriesType: 'line' },
            title: { text: 'Test' },
            xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
            series: [{ data: [12, 23, 1, 9, 34, 54] }]
            });
      }
    </script>

Answer 1

TestFunction doesn't "live inside the div ". JavaScript isn't part of the markup in that manner.

As soon as the function is defined:

function TestFunction() {
    // code
}

It is available from then on as a global function on the window object. So from anywhere else on the page you can invoke it:

TestFunction();

Of course, if this div is repeated in any way and you're assuming some kind of namespacing of functions within div s, then you'll find that not to be the case in practice. If the function is globally defined again anywhere in the document then that second definition will simply overwrite the first one.