jQuery:如何将函数应用于所有元素,包括稍后通过Ajax加载的元素？

Question

我有一个简单的jQuery函数来调整文本区域的大小,我希望它适用于所有文本区域.

在大多数情况下,这很有效:

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

但是,因为它只在文档准备就绪时调用一次,所以它无法捕获稍后使用Ajax添加到页面上的文本区域.我查看了.live()函数,它看起来非常接近我正在寻找的东西.但是,.live()必须绑定到特定事件,而我只需要在它们完成加载时触发一次(onLoad事件对单个元素不起作用).

我唯一可以工作的是将JavaScript调用直接包含在Ajax中.这是推荐的方式吗？

编辑:以下是它为Ajax请求所做的操作的rails源代码:

$('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]);
  }
 });
}

所以在我的特定情况下,我有一个链接,数据远程设置为true,它指向一个位置,该位置将返回JavaScript,指示包含要附加到我的文档的文本区域的表单.

Answer 1

一个简单的方法是使用ajaxComplete,在每个AJAX请求之后触发:

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

这就是说"每次AJAX请求完成时,找到所有textarea没有processed该类的元素(这似乎是由resizer插件添加的 - 为其目的的可怕名称!)并调用resizer它们上的插件.

如果我们能够看到您的AJAX呼叫,您可以进一步优化这一点.