从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); 
    }); 
    } 
});