Question

无法在按键时获取动态添加的文本区域值

2016-07-12

130

javascript jquery

一直以来它都运行良好，刚才我重新设计了其他功能的代码，现在出现了这个愚蠢的问题，我不知道为什么会发生这种情况。

jquery 中用于 textarea 的标记

 +'<div class="ckit-container__ft" data-ckit-footer>'
            +'<form action="" class="ckit-composer-form">'
                +'<div class="ckit-composer">'
                    +'<textarea data-ckit-composer-textarea placeholder="Add your reply" autocomplete="off" name="message" class="form-control ckit-composer__textarea"></textarea>'
                +'</div>'
            +'</form>'       
        +'</div>

绑定按键事件

jQuery(function($){
jQuery('body').bind('keypress','[data-ckit-composer-textarea]',function(event)
{
console.log(jQuery('[data-ckit-composer-textarea]').val());//returns empty 
console.log(jQuery(this).val());//returns empty string
});
});

由于 HTML 标记存在于 $(function(){..}) 之外，我甚至尝试克隆模板并找到要替换的相关属性，但没有成功。

var fullChatView = '<div class="ckit-container__ft" data-ckit-footer>'
                +'<form action="" class="ckit-composer-form">'
                    +'<div class="ckit-composer">'
                        +'<textarea data-ckit-composer-textarea placeholder="Add your reply" autocomplete="off" name="message" class="form-control ckit-composer__textarea"></textarea>'
                    +'</div>'
                +'</form>'       
            +'</div>';

var test = $(fullchatView).clone();//ReferenceError: fullchatView is not defined
var val = test.find('[data-ckit-composer-textarea]').val();
console.log(val);

Answer 1

jQuery('body').on('keypress','[data-ckit-composer-textarea]',function(event) { });

文档

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

Answer 2

在您的第一个代码示例中，将 .bind() 更改为 .on() ，并使用 keyup 事件，而不是 keypress 事件。

尝试以下操作：

jQuery(function($) {
    // Note: The $ parameter passed in to this callback function
    // represents the jQuery object, so you can safely use $ inside
    // this function.
    $('body').on('keyup', '[data-ckit-composer-textarea]', function() {
        console.log($(this).val());
    });
});

触发 keypress 事件时，textarea 的值尚未更改为包含按下的键。

Answer 3

尝试使用 jQuery.parseHTML()

进行克隆

Nogusta

2016-07-12