无法检索动态创建的textarea jquery的文本

时间:2013-11-26 15:16:42

标签: javascript jquery html

textToolkit= '<textarea class="textInput" style="width:400px; height:200px;"></textarea>';

//adding the textToolkit in controls
$('#controls').html(textToolkit+theUpdateButton);

//LATER IN CODE AFTER CLICK OF A BUTTON
singleData=$('.textInput').val();

即使在textarea中写完后,singleData也是空的...我怎样才能获得textarea的文本? :/

3 个答案:

答案 0 :(得分:2)

问题在于您的点击功能。正常

$(".someclass").click(function(){

}); 
DOM加载时将呈现

。但在此期间,特定类someclass将不会作为其动态添加的存在。所以你需要绑定它或使用live点击功能,如下所示:

$(document).on("click", ".someclass", function(){
    singleData = $('.textInput').val();
});

事件处理程序仅限于当前选定的元素; 在代码拨打电话 到.on()时,页面上必须存在 。要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序。或者,使用委托事件来附加事件处理程序,如下所述。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档。在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪。

参考:http://api.jquery.com/on/#direct-and-delegated-events

答案 1 :(得分:1)

您需要阅读某些事件的值,例如:点击按钮时。

还要确保使用jQuery on方法添加点击事件绑定代码。 on方法适用于当前和未来(动态添加到DOM)元素。

$(function(){

 var textToolkit= '<textarea class="textInput" style="width:400px; height:200px;"></textarea>';

var theUpdateButton="<input type='button' id='btnGet' value='get' />";
//adding the textToolkit in controls
$('#controls').html(textToolkit+theUpdateButton);

$(document).on("click","#btnGet",function(e){    
    e.preventDefault();
    var singleData=$('.textInput').val();
    //This is not the best jQuery selector. 
    //You may change according to your specific UI structure.
    alert(singleData);
});

});

以下是工作示例http://jsbin.com/eNigijIY/2/

答案 2 :(得分:0)

请确保页面上的所有元素都已加载。

$(function(){
 singleData=$('.textInput').text();
});