如何在JQuery HTML上包含腳本標記

Question

我在這裏有這樣的代碼，可以使我的web應用程序ajax化。

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

在一些特定點用戶應上傳文件，但由於它是Ajax化它將只加載這是本接受的響應的父容器。

  <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"); 

或將在服務器上的JS文件（例如fileupload.js）中加入JavaScript代碼片段（不包含<script>標籤），然後像這樣調用它：

$.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");