jQuery .load（）/ .ajax（）在追加后不在返回的HTML中執行javascript

Question

我已經嘗試使用.load()和$.ajax來獲取需要附加到容器的HTML，但是當我將它附加到元素時，返回的HTML中的Javascript沒有被執行。

使用.load() ：

$('#new_content').load(url+' #content > *',function() {
    alert('returned');
});

我也試過切換到$ .ajax調用。 然后我從返回的HTML中提取腳本，之后我將它附加到容器中，但同樣的問題，JS在這種情況下沒有執行甚至附加，並且據我所知，嘗試將<script>附加到像這樣的DOM元素不受歡迎？

使用$.ajax ：

$.ajax({ url: url }).done(function(response) {
    var source  = $("<div>").html(response).find('#overview_script').html();
    var content = $("<div>").html(response).find('#content').html();

    $('#new_content').html(content);
    $('<script>').appendTo('#new_content').text(source).html();

});

理想情況下，我在附加HTML后在回調中運行此javascript，但變量被設置為從控制器返回的值。

總而言之，我試圖獲得一些HTML，其中包含需要在附加HTML后運行的JS，但我沒有運氣使用.load()或$.ajax()作為返回HTML中的腳本要么在追加它時消失，要么根本不執行。

Answer 1

當load()與片段選擇器一起使用時，腳本元素將在添加片段之前被剝離，因此腳本將不會被執行 。

使用不帶后綴選擇器表達式的URL調用.load（）時，在刪除腳本之前將內容傳遞給.html（）。 這將在丟棄之前執行腳本塊。 但是，如果使用附加到URL的選擇器表達式調用.load（），則在更新DOM之前會刪除腳本，因此不會執行腳本。 兩種情況的示例如下所示：

所以試試吧

$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

演示： 小提琴

Answer 2

如果您知道要執行的腳本是什么，則可以在ajax響應中的其他位置定義腳本，然后從回調中調用它。 所以代替：

$('#new_content').load(url+' #content > *',function() {alert('returned');});

您可以使用

$('#new_content').load(url+' #content > *',function() {my_function(my_param);});

Answer 3

這段代碼怎么樣

$('#new_content').append($('<script>').html(source));

或者您只需將您的JavaScript內容移動到單獨的文件並使用它加載它

$.getScript("url to js file");

或者只是使用，

eval(source);