javascript - 如何在 JQuery HTML 上包含脚本标签

Question

我这里有这段代码，它可以ajaxizes我的网络应用程序。

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

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

         <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

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

无论如何，您应该避免加载包含 <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 片段(不带 <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");