從ajax回調中追加元素後執行腳本

Question

從ajax調用我得到一個div和一個腳本，用另一個ajax調用填充div。 問題是腳本運行時找不到div。

這是剃刀代碼：

@model int 

@{ 
    var id = string.Format("riga_{0}", Model); 
} 
<div id="@id"> 
    wait please... 
</div> 
<script type="text/javascript"> 
    $("#" + "@id").load("/RigaMovimento/Details/@Model"); 
</script> 

產生這樣的：

<div id="riga_79"> 
    wait please... 
</div> 
<script type="text/javascript"> 
    $("#" + "riga_79").load("/RigaMovimento/Details/79"); 
</script> 

ANSWER

並不美麗，但工程：

@using (Ajax.BeginForm("Create", new { movimentoId = Model.MovimentoId }, new AjaxOptions() { InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "righe", OnSuccess = "run_after" })) 
{ 
    <input type="submit" value="New" /> 
} 

<script type="text/javascript"> 
    var run_after; 
</script> 

的創建視圖：

@model int 

@{ 
    var id = string.Format("riga_{0}", Model); 
} 

<div id="@id"> 
    wait please... 
</div> 
<script type="text/javascript"> 
    run_after = function() { 
     $('#' + '@id').load(
      "/RigaMovimento/Details/@Model", 
      null, 
      function() { $('#' + '@id').fadeIn('slow'); }); 
    } 
</script> 

Answer 1

試試這個

<script type="text/javascript"> 
    $(function() { 
     /* code */ 
    }); 
</script> 

Answer 2

如果div位於DOM，jQuery的不能在HTML中找到它。 如果加載一個事件的腳本，你可以使用jQuery.live這樣

$('element').live('click', function(){ 
    $("#" + "riga_79").load("/RigaMovimento/Details/79"); 
}); 

也許這可能是工作（沒有測試）

$('body').live('load', function() { 
    $("#" + "riga_79").load("/RigaMovimento/Details/79"); 
}); 

否則使用livequery plugin這樣的：

$("#" + "riga_79").livequery(function(){ 
    $(this).load("/RigaMovimento/Details/79"); 
}); 

Answer 3

$（ - 選擇器 - ）。負載方法有一個額外的回調參數

http://api.jquery.com/load/

這是一個函數，一旦你的AJAX響應完成，就會調用它。 但是，您在AJAX響應中返回的腳本部分從不會默認評估。

你必須在這裏應用一個小技巧。請在下面找到一個更新JavaScript模塊，其中有一個公共方法「評估」。此方法從AJAX響應中獲取腳本並對其進行評估。

var Updater = function() 
{ 
    var module = {}; 

    function doEvaluation(response) 
    { 
     var elem = document.createElement('div'); 
     elem.innerHTML = response; 
     $(elem).find('script').each(
      function() 
      { 
       if (this.src) 
       { 
        $('body').append(this); 
       } 
       else 
       { 
        var content = $(this).html(); 
        eval(content); 
       } 
      }); 
    } 

    module.evaluate = function (response, status) 
    { 
     if (status == "success") 
     { 
      doEvaluation(response); 
     } 
    } 
    return module; 
}(); 

你甚至可以附加一個全新的JavaScript（如果在doEvaluation方法中的語句）。所以你需要做的是添加上面的模塊，以便它駐留在你的頁面上。其次，你必須修改你的第一個AJAX調用（返回PartialResult現在壞了），以類似於此：

$('--selector--').load('--url--', Updater.evaluate); 

或

$.get('--url--', function(data, status, xhr) 
{ 
    /* other logic */ 
    Updater.evaluate(data, status); 
}); 

和你做。請注意，下面的更新程序僅適用於jQuery AJAX調用。如果您使用MicrosoftAjax或MicrosoftMvcAjax則是另一回事。

Answer 4

在任何情況下，仍與此掙扎，我想到了一個巧妙的解決辦法的。假設你是一個jQuery的AJAX調用：

$.ajax({ 
    type: 'GET', 
    url: 'fragment.html', 
    success: function(html) { 
    $('body').append(html); 
    } 
}); 

假設fragment.html看起來是這樣的：

<div class="fillme"> 
</div> 
<script type="text/javascript> 
    $('.fillme').text('I am filled.'); 
</script> 

隨後的div.fillme的理想狀態是：

<div class="fillme"> 
    I am filled. 
</div> 

但是，當然，它贏得了」這是因爲div和腳本被同時追加，因此腳本執行時div.fillme不存在。那麼問題可以通過追加後面的腳本來解決。請注意，下面的代碼行：

var $html = $(html); 

將把名單

[<div class="fillme"></div>, <script type="text/javascript">...</script>] 

到$html變量。這些是尚未附加到DOM的全功能DOM片段。最重要的是，劇本還沒有執行;它會在我們追加它時。我們將確保在追加div後添加它。這裏是做一些通用代碼：

$.ajax({ 
    type: 'GET', 
    url: 'fragment.html', 
    success: function(html) { 
    var $html = $(html); 
    var nonscripts = $html.filter(function() { return !$(this).is('script'); }); 
    var scripts = $html.filter(function() { return !$(this).is('script'); }); 
    $('body').append(nonscripts).append(scripts); 
    } 
}); 

而這一切，鄉親們。

編輯：下面是一個更通用的解決方案簡單地利用的是，在$html可變元件在它們出現在HTML片段的順序列出的事實：

$.ajax({ 
    type: 'GET', 
    url: 'fragment.html', 
    success: function(html) { 
    $(html).each(function(i, element) { 
     $('body').append(element); 
    }); 
    } 
});