Подтвердить что ты не робот

Выполнить document.ready после ajax post

У меня есть файл custom.js, в котором у меня есть несколько элементов, которые имеют клик и другие методы, привязанные к ним. Весь файл инкапсулирован в document.ready(), и все работает. Однако, когда я делаю сообщение AJAX, document.ready() никогда не запускается снова для текущей страницы. Есть ли в любом случае я могу получить document.ready(), чтобы снова запустить или мне нужно, чтобы все в именованных функциях вызывало их из моего create.js.erb?

4b9b3361

Ответ 1

Вы всегда можете просто поместить все в одну функцию (с именем loadfunction или что-то еще) и вызвать эту функцию при загрузке документа и снова при загрузке ajax. Хотя это взломанное решение, оно должно работать достаточно хорошо.

Итак, возьмите все между $(document).onready(function () { и его конечной скобкой } И поставьте его в function OnloadFunction () {, заканчивающемся на }. Затем положите $document.onready(OnloadFunction);

Пример: У вас

$(document).ready(function () {alert("test");});

Это превратилось бы в:

function OnloadFunction ()
{
    alert("test");
}
$(document).ready(OnloadFunction);

Затем вы можете вызвать OnloadFunction, когда захотите.

Ответ 2

Объединив ответы Ben и fotanus, я создал следующий шаблон:

$(document).ready(function () {
    AjaxInit()
});

$(document).ajaxComplete(function () {
    AjaxInit()
});

function AjaxInit() {
    alert("test");
}

Ответ 3

Существует событие, которое запускается после каждого вызова ajax. Он называется ajaxComplete.

$( document ).ajaxComplete(function() {
    $( ".log" ).text( "Triggered ajaxComplete handler." );
});

Ответ 4

Я успешно использовал шаблон, подобный следующему:

Сначала мы должны определить плагин .query().

// jQuery.fn.query() emulates the behavior of .querySelectorAll() 
// by allowing a full/complex selector to be matched against
//a small slice of the dom. 
$.fn.query = function ( selector ) {
    var scopeElms = this,
        scopeIsDoc = scopeElms.length === 1  &&  scopeElms.is('html') ,
        // check for obviously simple selectors.... (needs more elegance)
        isComplexSelector = /\s/.test( selector.replace(/\s*([|~*$\^!]?=|,)\s*/g, '$1') ),
        elms;
    if ( scopeIsDoc  ||  isComplexSelector )
    {
      elms = $(selector);
      if ( scopeElms[0] )
      {
        elms = elms.filter(function(){
            var i = scopeElms.length;
            while (i--) {
              if ( scopeElms[i] === this || $.contains(scopeElms[i], this) )
              {
                return true;
              }
            }
            return false;
          });
      }
    }
    else
    {
      elms =  scopeElms.filter( selector )
                  .add( scopeElms.find(selector) );
    }
    return $(elms);
  };

Затем мы записываем нашу функцию init и привязываем ее к событию "ready", а также к нашему пользовательскому событию "domupdated". Внутри функции init мы используем .query() для поиска элементов из всего документа или только обновленного фрагмента...

// Here we define our DOM initializations
$(document).bind('ready domupdated', function (e, updatedFragment) {
    var root = $( updatedFragment || 'html' );

    // Begin imaginary initialization routines
    root.query('form').validate();
    root.query('.sidebar .searchform input#search').autocomplete();
    // etc...

  });

Затем всякий раз, когда мы добавляем в DOM блоки новых элементов (например, когда заканчивается запрос Ajax), мы запускаем событие domupdated и передаем обновленный фрагмент DOM в качестве параметра - например:

...
var ajaxedDom = $(xhr.resultText).find('#message');
ajaxedDom.appendTo( '#modal' );

$(document).trigger('domupdated', [ajaxedDom]);

Для меня эта настройка устраняет всю боль из инициализации DOM. Это позволяет мне поддерживать один набор подпрограмм init и сосредоточиться на забавных вещах.

Ответ 5

Я использовал трюк.;) Весь код находится внутри загруженной части файла (ajax). Я не использую никаких "успешных", "сделанных" или т.д. Расширенных функций jquery ajax load.

Сначала мы должны построить любую функцию. Например: _autostart();

function _autostart() {

  ... all code here ....

}

На теле мы вставим весь код js, который мы должны выполнить в конце загрузки ajax.

Затем мы просто выполняем эту функцию с помощью триггера времени.;)

setTimeout("_autostart();",0000);

И это все. Готово.:)

Конечно, мы можем использовать функцию js-кода для любого события в html-коде после ajax. Например: "onchange", "onclick" и т.д. Он тоже работает.:)

Ответ 6

Незначительный поворот на ответ Кена Мак. По какой-то причине мой ajaxComplete не сработает, если он не будет вложен в document.ready. Гнездить это внутри и все еще кричать работало на меня.

$(document).ready(function () {
    AjaxInit();

    $(document).ajaxComplete(function () {
      AjaxInit()
    });
});

function AjaxInit() {
    alert("test");
}