如何在 JQuery HTML 中包含脚本标签

Question

我这里有这段代码，可以对我的 web 应用程序进行 ajaxizes。

$.get(State.url, function(data) {
            console.log($(data).find('#main-content').text());
            $('#main-content').html($(data).find('#main-content').html());
        },"html");

在某些时候，用户应该上传一个文件，但由于它是 ajaxified，它只会加载传入响应的父容器，即 this。

         <form enctype="multipart/form-data" class="contact_form" action="doUploadAudio">
        <input type="file" name="file" value="" id="file"/>
        <script>
            console.log("HEHE");
                $('#fileupload').fileupload({
                    replaceFileInput:false,
                    done: function (e, data) {
                        alert("DONE");
                        $('#main-content').html('');
                        $('#main-content').html($(data.result).find('#main-content').html());
                    }
                });

             </script>  
              <button class="btn" id="uploadAudio" type="submit" class="submit" data-loading-text="Uploading...">Upload</button>
          </form>

如你所见，我的表单没有执行它的脚本标签，有什么办法可以执行吗？

请注意，我目前使用的是 jQuery 1.8.3

Answer 1

首先，我在您的 HTML 中没有看到任何 ID 为 fileupload 的元素？

无论如何，您应该避免加载包含<script> 标签的 HTML，因为加载的 JavaScript 的行为是不可预测的。

首先，您应该将您的 HTML 分开并单独加载：

<form enctype="multipart/form-data" class="contact_form" action="doUploadAudio">
    <input type="file" name="file" value="" id="file"/>
    <button class="btn" id="uploadAudio" type="submit" class="submit" data-loading-text="Uploading...">Upload</button>
</form>

然后你可以在$.get的成功回调中执行JavaScript：

$.get(State.url, function(data) {
            console.log($(data).find('#main-content').text());
            $('#main-content').html($(data).find('#main-content').html());
            $('#fileupload').fileupload({
                replaceFileInput:false,
                done: function (e, data) {
                        alert("DONE");
                        $('#main-content').html('');
                        $('#main-content').html($(data.result).find('#main-content').html());
                    }
            });
 },"html");

或者把JavaScript的sn-p（不带<script>标签）放在服务器上的一个JS文件中（比如fileupload.js），然后这样调用：

$.get(State.url, function(data) {
            console.log($(data).find('#main-content').text());
            $('#main-content').html($(data).find('#main-content').html());
            $.getScript("<url to fileupload.js>", function() {
                        console.log("Fileupload should now be working");
            });
},"html");