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

如果有人还在努力解决这个问题，我想到了一个简洁的解决方案。假设您正在进行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不存在。然后，可以通过在附加div之后附加脚本来解决问题。请注意以下代码行：

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片段中出现的顺序列出的事实： / p>
$.ajax({ type: 'GET', url: 'fragment.html', success: function(html) { $(html).each(function(i, element) { $('body').append(element); }); } });

Answer 2

试试这个

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

Answer 3

如果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 4

$（ - selector - ）。load方法有一个额外的回调参数

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

这是一个在AJAX响应完成后调用的函数。但是，默认情况下，永远不会评估您在AJAX响应中返回的脚本部分。

你必须在这里申请一个小技巧。请在下面找到一个更新javascript模块，其中包含一个公共方法“evaluate”。此方法从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它的另一个故事。

从ajax回调追加元素后执行脚本

4 个答案: