2011-04-18 96 views
3

該評估JavaScript是讓我瘋了......的jQuery在HTML字符串併發症

我所要做的是更新一個網頁的一部分,併爲理由不值得說明的是,該請求是要求一整個新的HTML頁面(包括它的頭部),然後只提取指定元素中包含的HTML(由ID標識)。

我本來每當新的HTML AJAX請求完成後,將運行下面的JavaScript代碼:

var $newContent = $(newHtmlContent); 
loadingElement.innerHTML = $("#" + loadingElementId, $newContent).html(); 

這是偉大的,直到我有一些HTML已加載的是,包含在指定範圍內元素,包含了需要運行一些腳本,所以我改成了這樣:

var $newContent = $(newHtmlContent); 
$(loadingElement).html($("#" + loadingElementId, $newContent).html()); 

我已閱讀,jQuery將評估與HTML()函數的HTML字符串參數的腳本 - 但是,似乎問題是腳本是條紋的在此通話之前編輯。 有過通過螢火看看下面似乎是發生了什麼:

$(newHtmlContent) // includes all 'script' elements 
$("#" + loadingElementId, $newContent) // has no scripts 
$("script", $newContent) // empty jQuery object 

有沒有人有什麼建議? 在此先感謝。

+0

的利息,可以是一個事實,即jQuery的「$ .load()」調用,它提供了正是你想要的功能在這裏實現,當你以這種方式使用它時,也不會執行嵌入的'

1

編輯沒關係;我想你在這裏沉沒了。只要您將內容移交給jQuery,我很確定您的腳本已被刪除。如果「newContent」實際上是「native」頁面的一部分,但是由於它在jQuery實例化的那個片段中,那麼下面的東西技巧將會工作,這太遲了。

認爲這會工作,但我承認我還沒有加載的文件,就像你得到了什麼嘗試過:

$('#loadingElement').html($('#' + loadingElementId, $newContent)[0].innerHTML); 

的想法是繞過jQuery的拉出時加載部分的內容。

+0

'$(「#」+ loadingElementId,$ newContent)'簡單地執行'$ newContent.find'我仍然堅持如何去除腳本。 – 2011-04-18 16:50:35

+0

我也很困惑;我不知道*做什麼,或者爲什麼。我一直在玩jsfiddle,我只是越來越混亂... – Pointy 2011-04-18 16:52:58

+0

同樣在這裏。我發佈了我的發現。 – 2011-04-18 17:24:01

0

你可以嘗試的一件事是將包含的<script>元素和eval()這些元素或將它們追加到頁面的head中。

1

有這個問題很長的解釋在這裏:http://forum.jquery.com/topic/jquery-removing-script-tags-from-html-string-when-using-html

從這個討論:

如果你想選擇一個HTML字符串/遍歷一部分,你想要的HTML字符串中<script>要執行,您需要在選擇/遍歷之前將HTML字符串插入到DOM中。

因此,看起來問題在於您試圖將元素從返回的HTML中提取出來,而無需先將其插入到DOM中。兩種可能的解決方案:

  1. 將整個返回的HTML插入到DOM中。腳本標籤將執行。然後移除你不需要的部分。這並不理想,因爲它可能會顯示您不想要的內容,除非您先隱藏loadingElement並在完成後顯示。

  2. $(newHtmlContent)拉出腳本網址,使用$.getScript()檢索並執行每個URL,然後添加檢索元素融入DOM。這更加痛苦,但它應該正常工作,並且不必將不必要的內容插入到DOM中。

0

我猜在這裏很好,但怎麼樣:

//scripts will be executed and HTML put into loadingElement 
$('#loadingElement').html(newHtmlContent); 

//find the specified element under #loadingElement, get it's HTML 
//and set it as the HTML for #loadingElement 
$('#loadingElement').html($('#loadingElement').find('#idToFind').html());