У меня есть файл custom.js, в котором у меня есть несколько элементов, которые имеют клик и другие методы, привязанные к ним. Весь файл инкапсулирован в document.ready(), и все работает. Однако, когда я делаю сообщение AJAX, document.ready() никогда не запускается снова для текущей страницы. Есть ли в любом случае я могу получить document.ready(), чтобы снова запустить или мне нужно, чтобы все в именованных функциях вызывало их из моего create.js.erb?
Выполнить document.ready после ajax post
Ответ 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");
}