通过ajax执行javascript

Question

我有一个PHP文件，回声与HTML <script>元素。 像这样：

<div>
    <button onclick="FunctionName();">Click Me</button>
</div>
<script type="text/javascript" id="script1">
    function FunctionName() {
         /* block of code here */
    }
</script>
<script type="text/javascript" id="script2">
     alert("working")
</script>

我正在通过innerHTML方法插入此代码。 但是，我发现插入DOM的<script>标签不会执行，除非您这样调用：

eval(document.getElementById('script1').innerHTML);
eval(document.getElementById('script2').innerHTML);

现在的问题是：script2正在执行，并且正在发出警告：“正在运行”，但是当我单击按钮时，控制台将返回此错误：

Uncaught ReferenceError: FunctionName is not defined

而奇怪的是，当我复制/粘贴相同的JavaScript代码时，将其放在eval（）中； 并在控制台中输入它，效果很好！

那么为什么会这样以及如何解决呢？

Answer 1

该jsFiddle与您拥有的代码完美配合。 但是我发现如果在页面创建后添加它会导致问题，因为在页面加载完成后添加内联脚本不会执行。

如果您将其附加，如果需要将其包含在html中，请参考此帖子以解决类似问题。 但是，如果可以将脚本移动到其他文件中，我建议使用jQuery getScript而不是普通的ajax。

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
    // ...
});

Answer 2

我认为问题在于，当设置了单击事件侦听器时，尚未创建您的函数。

尝试将您的script1放在具有onClick事件的div之前。