Выполнить скрипт после добавления элемента из обратного вызова ajax

Question

Из вызова ajax я получаю div и скрипт, который заполняет div другим вызовом ajax.проблема в том, что когда скрипт запускается, он не может найти 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>

ОТВЕТ

не красив, а работает:

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

И это все, ребята.

Edit: Вот еще более универсальное решение, которое просто используеттот факт, что элементы в переменной $html перечислены в порядке их появления во фрагменте HTML:

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

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 , например:

$("#" + "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 (оператор if внутри метода 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

попробуйте

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