Javascript 我从脚本中创建了textarea expander，但之后，它没有'；t膨胀

我不知道标题是否正确。 我用一个脚本创建了一个表，其中包含5个textarea，class=“expand”。 当我写的时候，这个文本区域会扩展，但不起作用。 在编写jquery插件之后，是否有一种方法可以调用该插件？ 在我尝试不创建textarea之前，我在html文件中编写了它，它工作了

（2文本区域的信息和示例：

http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html
http://jsfiddle.net/V2RLs/2/ (without class="expand")

) 但是当我在文本区域中写入后，它就不会扩展。为什么

这是我的剧本：

<script src='js/jquery.textarea-expander.js'></script>
<script >$(document).ready(function() { 
var regex,v,l,c,b;

$( "#wnd_Addparam" ).dialog({
            autoOpen: false,
            height: 'auto',
            width: 350,
            modal: true,
            resizable:false,
            buttons: {
                "Add": function() {
                                 contapara=(parseInt(contapara)+1);

                document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+txt_idparam.value+"</li>";    
                $('#formp').submit();
                                $( this ).dialog( "close" ); 
                                   },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( this ).dialog( "close" );
            }
        });

        $( "#btn_Addpar" ).click(function() {
                        i=(parseInt(contapara)+1);

    $('#wnd_Addparam').append('<form method="GET" id="formparam"><table><tr><td><label> ID  </label></td><td><textarea class="expand" id="inputp'+i+'_id" class="text"> </textarea></td></tr><tr><td><label>Type</label></td><td><select id="inputp'+i+'_type"><option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option><option value="list_values">List of values</option><option value="range">Range</option><option value="selection_collapsed">Selection (collapsed)</option><option value="selection_expanded">Selection (expanded)</option><option value="subimage">Subimage selection</option><option value="polygon">Polygon selection</option><option value="horizontal_separator">Horizontal separator</option></select></td></tr><tr><td> <label > Description</label></td> <td><textarea class="expand" id="inputp'+i+'_description" size=24></textarea></td></tr><tr><td><label>Value</label></td><td><textarea class="expand" id="inputp'+i+'_value"></textarea></td></tr><tr><td><label>Info (help)</label></td><td><textarea class="expand" id="inputp'+i+'_info"></textarea></td></tr><tr><td><label> Visible?</label></td><td><input type="checkbox" id="inputp'+i+'_visible"></td></tr></table>/form>');
                $( "#wnd_Addparam" ).dialog( "open" );
            });});</script>

$（文档）.ready（函数（）{
var regex，v，l，c，b；
$（“#wnd#u Addparam”）。对话框({
自动打开：错误，
高度：“自动”，
宽度：350，
莫代尔：是的，
可调整大小：false，
按钮：{
“添加”：函数（）{
contapara=（parseInt（contapara）+1）；
document.getElementById（“sorpara”）.innerHTML+=“
”+txt\U idparam.value+”
”；
$（'#formp'）。提交（）；
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
关闭：函数（）{
$（此）.dialog（“关闭”）；
}
});
$（“#btn_Addpar”）。单击（函数（）{
i=（parseInt（contapara）+1）；
$（“#wnd_Addparam”）.append（'ID TypeTextIntegerFloatList of valuesRangeSelection（折叠）选择（展开）子图像选择多边形选择水平分隔符描述值信息（帮助）可见？/form>”）；
$（“wnd#u Addparam”）。对话框（“打开”）；
});});

插件扩展器

/**
* 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, 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();
});

/**
*用于jQuery的TextAreaExpander插件
*v1.0
*扩展或收缩文本区域高度取决于
*用户在框中输入的内容数量。
*
*作者：Craig Buckler，Optimalworks.net
*
*如SitePoint.com上所述：
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
*请随意使用，风险自负。
*/
/**
*用法：
*
*在JavaScript中，使用：
*$（）.TextAreaExpander（，）；
*其中：
*是DOM节点选择器，例如“textarea”
*以像素为单位的最小文本区域高度（可选）
*以像素为单位的最大文本区域高度（可选）
*
*或者，在HTML中：
*为任何标记指定一个“扩展”类。
*例如。
*
*或者指定一个“expandMIN MAX”类来设置最小和最大高度。
*例如。
*文本区域将使用50到200像素之间的适当高度。
*/
（函数（$）{
//jQuery插件定义
$.fn.TextAreaExpander=函数（最小高度、最大高度）{
var hCheck=！（$.browser.msie | |$.browser.opera）；
//调整文本区域的大小
函数ResizeTextarea（e）{
//事件还是初始化元素？
e=e.target | e；
//查找内容长度和框宽度
var vlen=e.value.length，ewidth=e.offsetWidth；
if（vlen！=e.valLength | | ewidth！=e.boxWidth）{
如果（hCheck&（vlenh？“自动”：“隐藏”）；
e、 style.height=h+“px”；
e、 valLength=vlen；
e、 箱宽=宽度；
}
返回true；
};
//初始化
这个。每个（函数（）{
//是文本区吗？
if（this.nodeName.toLowerCase（）！=“textarea”）返回；
//设置高度限制
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）；
//初始调整大小
重新调整区域（此区域）；
//零垂直填充和添加事件
如果（！this.Initialized）{
this.Initialized=true；
$（this.css（“padding top”，0）.css（“padding bottom”，0）；
$（this）.bind（“keyup”，ResizeTextarea）.bind（“focus”，ResizeTextarea）；
}
});
归还这个；
};
})（jQuery）；
//初始化所有扩展文本区域
jQuery（文档）.ready（函数（）{
jQuery（“textarea[class*=expand]”。TextAreaExpander（）；
});

插件在document.ready上准备textareas，因此在document.ready启动后分配给该类的任何textarea都不会受到插件的影响-但是，您可以直接调用插件而不是添加该类：

jQuery(".expand").TextAreaExpander();

---

但是，您不应该在一个元素上运行TextAreaExpander两次，因此，如果您有textareas使用在document.ready上初始化的插件，请确保为新生成的textareas使用另一个类名-或者您可以删除插件的最后几行。

此标题的问题是否正确？在我删除lasy之前，只有几行，但之后就不起作用了。我在这句话的附录后面写：jQuery（“textarea[class*=expand]”）；文本区域正在工作，但变得非常小。我通过添加插件来编辑问题。插件的默认设置是将textarea缩小到尽可能小的大小-但是，TextAreaExpander支持参数来设置textarea的最大和最小垂直大小

$.fn.TextAreaExpander=函数（最小高度，最大高度）

对不起，您的答案是正确的，而且很有趣。但是这个变量来自哪里？这是一个函数定义-

jQuery（“.expand”）.TextAreaExpander（5,10）

将创建一个最小高度为5，最大高度为10.$（“#wnd_Addparam”）.find（'textarea'）.TextAreaExpander（）；这是呼叫新文本区域创建的句子