Question

我想写一点聊天。在页面的第一次加载时，将从数据库加载旧消息和答案。所以我有很多不同ID的消息。对于每条消息，我都有一个回复链接。单击它时会出现一个消息框。我的问题是，当用户在键盘上按Enter键时我想发送回复。

回复textareas添加了jquery所以我不能使用$（textarea）.keypress（.....）

以下是我的代码示例：

 <div id="container" style="">
<div id="main" role="main">
    <div id="shoutbox_container">
        <div id="shoutbox_content" style="margin-top:20px;"></div>
    </div>
</div>

for (id = 0; id < 5; id++) {
   var res_container = '<div id="shoutbox_entry_' + id + '" class="entry entrybox">';
   res_container += 'Mr Idontknow wrote:' + id + '. Message ';
   res_container += ' <span class="reply" id="reply" data-parentid="' + id + '">reply</span> ';
   res_container += '<div class="replytextbox replybox" id="reply_textbox_' + id + '" style="display:none;">';
   res_container += '<textarea class="replytext" name="antwort" id="antwort_' + id + '" data-parentid="' + id + '"></textarea>';
   res_container += '<button id="replysend">send</button> ';
   res_container += '</div>';
   res_container += '</div><br><br>';
   $('#shoutbox_content').prepend(res_container);   } 

//reply textarea   
$('#shoutbox_content').on('click', '#reply', function () {
   var parentid = $(this).data('parentid');
   $('#shoutbox_content').find('#reply_textbox_' + parentid).toggle();
});

//reply send button
$('#shoutbox_content').on('click', 'button', function () {
   var parentid = $(this).prev('textarea').data('parentid');
   var reply = $(this).prev('textarea').val();
   $(this).prev('textarea').val('');
   $('#shoutbox_content').find('#reply_textbox_' + parentid).hide();

   if (reply.length > 0) {
       alert('save reply ' + parentid);
   }
});

// when the client hits ENTER on their keyboard
$('#shoutbox_content').keypress('textarea', function (e) {
   if (e.which == 13) {
       console.log($(this).find('textarea'));
       var test = $(this).attr('data-parentid');
       alert('Enter ' + test);
       $(this).blur();
       $(this).next('#replysend').focus().click();
   }
});

它可以工作，但我不知道发送了哪个ID。有没有人知道我怎么能找到用户按Enter键的回复textarea？

Answer 1

所以，使用.on（）函数就像你正在使用的其他事件声明：

// when the client hits ENTER on their keyboard
$('#shoutbox_content').on('keypress','textarea', function (e) {

   //Retrieve ID of the textarea
   var id = $(this).attr('id');

   //Do what you want with id variable

   if (e.which == 13) {
       console.log($(this).find('textarea'));
       var test = $(this).attr('data-parentid');
       alert('Enter ' + test);
       $(this).blur();
       $(this).next('#replysend').focus().click();
   }
});

然后通过检查其ID或其他属性来检索发生事件的textarea：$(this).attr('id')

jQuery keypress事件，用于许多动态添加的textareas

1 个答案: