1

这是这个问题的延续：我从脚本创建了 textarea 扩展器，但之后，它没有扩展

我有自动扩展后如何在文本区域中写入的插件。这是一个插件：

/**
* TextAreaExpander plugin for jQuery
* v1.0
* Expands or contracts a textarea height depending on the
* quatity of content entered by the user in the box.
*
* By Craig Buckler, Optimalworks.net
*
* As featured on SitePoint.com:
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
* Please use as you wish at your own risk.
*/
/**
* Usage:
*
* From JavaScript, use:
* $(<node>).TextAreaExpander(<minHeight>, <maxHeight>);
* where:
* <node> is the DOM node selector, e.g. "textarea"
* <minHeight> is the minimum textarea height in pixels (optional)
* <maxHeight> is the maximum textarea height in pixels (optional)
*
* Alternatively, in you HTML:
* Assign a class of "expand" to any <textarea> tag.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea>
*
* Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea>
* The textarea will use an appropriate height between 50 and 200 pixels.
*/
(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight=21, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length, ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax))+2;
e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
e.style.height = h + "px";
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != "textarea") return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).css("padding-top", 0).css("padding-bottom", 0);
$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
}
});
return this;
};
})(jQuery);
// initialize all expanding textareas
jQuery(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander();
});

当我打开我的网站和打开这个插件时。我调用该函数TextAreaExpander()获取所有文本区域class="expand"并更改参数。直到在这里发挥作用。

在我用这个类创建新的文本区域之后（使用Jquery and Javascript）但我不知道如何调用该函数TextAreaExpander()

有一种方法是jQuery(".expand").TextAreaExpander();在最后三个句子上写下更改所有文本区域。这不起作用。

如何更改插件以更改新旧textarea？

我做了另一项手术。创建新的文本区域后，我可以使用jQuery(".expand").TextAreaExpander();和函数调用该函数。但是我在三个不同的函数中调用了这个函数三次，现在不起作用，我有新的错误。

TypeError: 'undefined' is not a function (evaluating 'jQuery(".expand").TextAreaExpander()')

为什么？

4

1 回答 1

0

这种情况并不少见，您在页面加载时调用插件，然后添加需要相同插件的新元素。如果您在整个班级上调用插件，您可能会遇到问题，因为它已经在现有元素上初始化

你可以做的几件事

  1. 修改插件以添加类似“textAreaExpander”的类，然后在插件运行时检查该类是否已存在。如果存在，什么也不做。-或者-
  2. 仅在新 html 上调用插件，如下例所示

.

var $newElement= $('<textarea>').appendTo( selector);
$newElement.TextAreaExpander()
于 2012-10-20T14:15:55.750 回答