如何將字符串中的javascript塊添加到html中？

我有一個AJAX調用，它返回我下面的響應：如何將字符串中的javascript塊添加到html中？

<div class="content"> 
    <script language="JavaScript"> 
     function validate(){ 
      alert('validate is working'); 
     } 
    </script> 
    <div class="container"> 
     <a href="#" onclick="javascript:validate();">my button</a> 
    </div> 
</div>

現在，我想響應爲HTML轉換並追加到網頁，這使Ajax調用。

$.get('test.php', function(data) { 
    $('#someTarget').append($(data).find('.content').html()); 
});

我已經試過上面的代碼，但它似乎只能追加容器div。有沒有辦法將javascript代碼塊添加到我現有的頁面中？

來源

2012-11-14 halilb

如果給出正確的選擇器，你應該工作，但是你錯過了'.find（'。content'）'中的'.'。你如何確認腳本沒有被執行？ –

嘿@KevinB，我剛纔拼錯了。這裏的內容 - 我修好了。我認爲腳本沒有執行，因爲我看不到在DOM中的驗證功能 - 並且當我點擊「我的按鈕」時沒有提示。 – halilb

在代碼中有兩個問題：

$('#someTarget').append($(data).find('content').html());

$(data)並解析和執行你的腳本，你插入之前到DOM
假設你的意思$(data).find('.content').html()的HTML（）返回內容的innerHTML，您只需要$(data)。

試試這個：

<div class="content"> 
    <style type="text/javascript"> 
     function validate(){ 
      alert('validate is working'); 
     } 
    </style> 
    <div class="container"> 
     <a href="#" onclick="javascript:validate();">my button</a> 
    </div> 
</div>

現在有一個小竅門：我使用<style>包裝腳本，應該解釋和插入DOM後執行。

$.get('test.php', function(data) { 

    // parse HTML to DOM 
    var $data = $(data); 

    // take the scripts out 
    var $inlineScripts = $('style[type="text/javascript"]', $data).remove(); 

    // Now append the DOM 
    $('#someTarget').append($data); 

    // And globalEval the scripts 
    $inlineScripts.each(function() { 
     $.globalEval(this.innerText); 
    }); 
});

好爲您簡單的驗證功能得到由一個點擊處理函數調用，你現在不需要我了內嵌腳本技巧，但是你會需要它，當你有積極的腳本，應該後執行插入的HTML被解析爲和。

更新：如果您不希望插入'.content'，請不要使用html（） - 因爲它返回一個字符串，所以您可以兩次解析html。改用.append($(".container", $(data)))或.append($(data).find(".container"))。

來源

2012-11-14 15:41:34 metadings

感謝您的回答。我會嘗試你的建議 - globalEval可能是我正在尋找的東西。我會告訴你。 – halilb

請注意'$（data）'解析和評估內聯腳本。這就是爲什麼我把它包裝成風格，然後做globalEval。 – metadings

如何將字符串中的javascript塊添加到html中？

回答

相關問題