通过innerHTML插入Javascript函数时出现ReferenceError

Question

我在调用通过innerHTML 属性插入

的Javascript 函数时遇到问题。我在 SO 中搜索了类似的线程，但无法找到该问题的解决方案。

在简化版本中，这是我所拥有的：

MainPage.php

// ... Basic Headers 
<div id = 'list'>
    {include file="list.tpl"}
</div>
// More stuff...
<script type="text/javascript">
    function callbackFunction(data) {
        $('list').innerHTML = data.updatedListHTML;
        updateCalculatedFields();
    }
    // Perform a Ajax POST Request with the callbackFunction()
</script>

List.tpl

{if $thereIsData}
    // Create a table, populate its content...
    <script type="text/javascript">
        function updateCalculatedFields() {
             // Change some of the values in the created table...
        }
    </script>
{/if}

使用上面的代码，我在 callbackFunction( data)，同时尝试调用 updateCalculatedFields() 函数。我仔细检查了innerHTML 是否已正确更新；updateCalculatedFields() 函数（以及整个脚本标记）已添加到div 中。然而，Javascript 似乎无法找到注入的函数。

只需稍加改动，该功能就可以工作。如果将 list.tpl 更改为：

List.tpl（版本 2）

{if $thereIsData}
    // Create a table, populate its content...
{/if}
<script type="text/javascript">
    function updateCalculatedFields() {
         // Change some of the values in the created table...
    }
</script>

两种情况之间的不同之处在于，在第二种情况下，updateCalculatedFields() 函数从一开始就随页面一起加载。在第一个中，它稍后与innerHTML 一起添加。所以，我的结论是，Javascript 不会注册通过innerHTML 添加的函数。但我非常怀疑情况是否如此；因此，如果有人能够对这个问题做出解释，那就太好了。

Answer 1

使用innerHTML 插入时，不会评估JavaScript。您需要自己对其进行 eval() 或将新的外部脚本标记附加到页面。