javascript - jQuery:如何将一个函数应用于所有元素，包括一些稍后通过 Ajax 加载的元素？

Question

我有一个简单的 jQuery 函数可以调整文本区域的大小，我希望它适用于所有文本区域。

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

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

但是，因为它只在文档准备就绪时调用一次，所以它无法捕获稍后使用 Ajax 添加到页面上的文本区域。我查看了 .live() 函数，它看起来与我正在寻找的非常接近。但是，.live() 必须绑定(bind)到特定事件，而我只需要在加载完成后触发一次(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]);
  }
 });
}

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

Answer 1

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

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

意思是“每次 AJAX 请求完成时，找到所有没有 processed 类的 textarea 元素(这似乎是由 resizer 插件添加的 - - 糟糕的名字!)并调用它们的 resizer 插件。

如果我们可以看到您的 AJAX 调用，您可以进一步优化它。