JQuery 追加 javascript答案

【问题标题】：JQuery Append javascriptJQuery 追加 javascript
【发布时间】：2011-09-20 10:15:58
【问题描述】：

我尝试创建模块化应用程序，因此每个页面都包含自己的 html 和 javascript 代码。我应该像这样动态加载所有代码：

var s = document.createElement("script");
s.type = "text/javascript";
s.src='function oncl() { alert("click");}';
$(".selector").append(s);

$( ".selector" ).
append('<input type="button" onclick="ocl();" />
<form action="../test/test_upload4.php"  
method="POST" enctype="multipart/form-data"  name="getnamefile">
<input type="file" id="uploadfile" name="uploadfile">
<input type="submit" id="Submit" name= "Submit" value="Upload"></form>');

但它不起作用 -Error: ocl is not defined。可能是什么原因？如果我理解每个网页中正确的是一个包含所有 javascript 函数的对象 - 那么为什么不能向/从添加或删除函数呢？

【问题讨论】：

你为什么需要这种hackery？你在 html 中使用 jQuery 和 onclick 吗？
这是一个可怕的想法。你为什么要这样做？
我正在开发的 Web 应用程序很复杂。它就像 CRM。它包含近 100 页。所以我需要分离到独立的页面 - 并行工作。如果每个模块都有自己的 javascript 和 html 似乎很方便
您可以在使用 jquery click 或 bind 方法附加标记后设置事件处理程序。

标签： javascript jquery function append

【解决方案1】：

<script> 标记的 src 属性指定外部 Javascript 文件的 URL，而不是脚本的文本。

如果要执行任意字符串中的代码，可以调用eval函数。
但是，不要。

【讨论】：

【解决方案2】：

在您的代码中，您声明了一个名为 oncl 的函数并尝试调用 ocl（带有 缺少 n）。

问候，

最大

【讨论】：

看看 SLaks 的答案（并考虑到其他贡献者的 cmets，也许你可以找到另一种方法来做你想做的事）

【解决方案3】：

除了上面的答案，你还没有定义任何“ocl”函数，还有“oncl”。

【讨论】：

【解决方案4】：

如果你想动态加载js文件，可以尝试如下：

这是 HTML 页面代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <script type="text/javascript">
        function dynamicLoad() {
            var s = document.createElement("script");
            s.type="text/javascript";
            s.language="javascript";
            // Here goes your 
            s.src ="dynamic.js";
            document.getElementsByTagName("head")[0].appendChild(s);
            s.onreadystatechange = function() {
                //window.alert(s.readyState);
            }
            s.onload= function() {
                if (s.readyState == "complete") {
 // You must create your DOM element after the js file has been loaded
                    var btn = document.createElement("input");
                    btn.type="button";
                    btn.value="Click Me";
                    btn.onclick = test;
                    document.getElementsByTagName("body")[0].appendChild(btn);
                }
            }
        }
    </script>
    </head>
    <body onload="dynamicLoad()">
        <!-- a href="javascript:void(0)" onclick="test()">Click Me</a -->
    </body>
    </html>

这里是js文件：

function test() {
    window.alert("HELLO");
}

我在 IE 9 下测试了代码。仅供参考

【讨论】：