jQuery событие нажатия клавиш для многих динамически добавленных текстовых полей

Question

Я хочу написать небольшой чат. При первой загрузке страницы старые сообщения и ответы будут загружены из базы данных. Поэтому у меня много сообщений с разными идентификаторами. Для каждого сообщения у меня есть ссылка для ответа. Когда вы нажимаете на нее, появляется окно с сообщением. Моя проблема в том, что я хочу отправить ответ, когда пользователь нажимает Enter на своей клавиатуре.

ответа прокручиваемого добавлен с JQuery, так что я не могу использовать $ (текстовое поле) .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(); 
    } 
}); 

Это работает, но я не знаю, какой идентификатор был отправлен. Есть ли у кого-нибудь идея, как я могу узнать, в каком ответном текстовом поле пользователь нажал Enter?

Answer 1

Таким образом, использование .он() функция, как другие события декларации вы используете:

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

Затем извлечь текстовое поле, где произошло событие, проверяя его идентификатор или другой атрибут, как это: $(this).attr('id')