jQuery: как применить функцию ко всем элементам, включая те, которые загружаются позже через Ajax?

Question

У меня есть простая функция jQuery, которая изменяет размеры текстовых областей, и я хочу, чтобы она применялась ко всем текстовым областям.

В большинстве случаев это прекрасно работает:

$(document.ready(function(){$("text_area").resizer('250px')});

ОднакоПоскольку он вызывается только один раз, когда документ готов, он не может перехватить текстовые области, которые впоследствии добавляются на страницу с помощью Ajax.Я посмотрел на функцию .live (), которая кажется очень близкой к тому, что я ищу.Однако .live () должен быть привязан к определенному событию, тогда как мне просто нужно, чтобы он запускался один раз, когда они закончили загрузку (событие onLoad не работает для отдельных элементов).

Единственное, что нужноЯ могу начать работать - это действительно навязчивое включение вызова JavaScript прямо в Ajax.Это рекомендуемый способ сделать это?

Редактировать: Вот исходный код rails для того, что он делает для запросов Ajax:

$('a[data-confirm], a[data-method], a[data-remote]').live('click.rails', function(e) {
 var link = $(this);
 if (!allowAction(link)) return false;

 if (link.attr('data-remote') != undefined) {
  handleRemote(link);
  return false;
 } else if (link.attr('data-method')) {
  handleMethod(link);
  return false;
 }
});

// Submits "remote" forms and links with ajax
function handleRemote(element) {
 var method, url, data,
  dataType = element.attr('data-type') || ($.ajaxSettings && $.ajaxSettings.dataType);

 if (element.is('form')) {
  method = element.attr('method');
  url = element.attr('action');
  data = element.serializeArray();
  // memoized value from clicked submit button
  var button = element.data('ujs:submit-button');
  if (button) {
   data.push(button);
   element.data('ujs:submit-button', null);
  }
 } else {
  method = element.attr('data-method');
  url = element.attr('href');
  data = null;
 }

 $.ajax({
  url: url, type: method || 'GET', data: data, dataType: dataType,
  // stopping the "ajax:beforeSend" event will cancel the ajax request
  beforeSend: function(xhr, settings) {
   if (settings.dataType === undefined) {
    xhr.setRequestHeader('accept', '*/*;q=0.5, ' + settings.accepts.script);
   }
   return fire(element, 'ajax:beforeSend', [xhr, settings]);
  },
  success: function(data, status, xhr) {
   element.trigger('ajax:success', [data, status, xhr]);
  },
  complete: function(xhr, status) {
   element.trigger('ajax:complete', [xhr, status]);
  },
  error: function(xhr, status, error) {
   element.trigger('ajax:error', [xhr, status, error]);
  }
 });
}

Так что в моем конкретном случае яполучил ссылку, для которой data-remote установлен в true, которая указывает на местоположение, в котором будет возвращен JavaScript с указанием формы, содержащей текстовую область, которая будет добавлена ​​в мой документ.

Answer 1

Простой способ сделать это - использовать ajaxComplete, который запускается после каждого запроса AJAX:

$(document).ajaxComplete(function() {
    $('textarea:not(.processed)').resizer('250px');
});

Это говорит, что «каждый раз, когда AJAX-запрос завершается, найдите все textarea элементы, которые не имеют класса processed (который, кажется, добавляется плагином resizer - ужасное имя для его цели!) И вызовите resizer плагин на них.

Возможно, вам удастся оптимизировать этот процесс, если мы увидим ваш вызов AJAX.

Answer 2

Интересно, если вы могли бы использовать .load для этого. Например:

$ ('text_area'). Load (function () { . $ ( "Text_area") переклассификатор ( '250px'); });

Answer 3

Вообще-то, я бы так сделал ..

$.ajax({
  type : "GET",
  url : "/loadstuff",
  success: function(responseHtml) {
    var div = $("#containerDiv").append(responseHtml);
    $("textarea", div).resizer("250px");
  }
});