Выполнить документ. Уже после поста ajax

Question

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

Answer 1

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

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

Пример: у вас есть

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

Это превратится в:

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

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

Answer 2

Объединив ответы Бена и Фотана, я создал следующую схему:

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

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

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

Answer 3

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

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

Answer 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 и связываем еена «готовое» событие, а также на наше пользовательское «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.Это позволяет мне поддерживать единый набор процедур инициализации и сосредоточиться на забавных вещах.

Answer 5

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

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

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

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

Answer 6

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

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

function _autostart() {

  ... all code here ....

}

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

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

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

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

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