Question

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

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

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

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

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

编辑：以下是它为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请求完成时，找到没有textarea类的所有processed元素（似乎是由resizer插件添加的 - 为了它的目的可怕的名字！）并调用它们上的resizer插件。

如果我们能看到你的AJAX电话，你可以进一步优化它。

Answer 2

一般来说，我会这样做..

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

Answer 3

想知道你是否可以使用.load。例如：

$（'text_area'）。load（function（）{ $（ “text_area”）的大小调整（ '250像素'）; }）;

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

3 个答案: