Добавить текст пользователя с ключом ввода в ul (окно чата) jQuery

Question

Я разрабатываю чат с jQuery. Я хочу добавить li, который содержит текст пользователя ul, используя ключ «Enter» (без PHP или любого сервера), но он не работает.

Мой код выглядит следующим образом:

var txt = "<b>me:</b>"+$(".usertext").val(); 
var myli = $("<li>").html(txt); 
$('chav_box_in').keypress(function(e) 
{ 
    if ($(".usertext").val() != "") 
    { 
     if (e.keyCode == 13) 
     { 
      $("#send").click(function(){ 
       $("#chatlog").append(myli); 
       $(".usertext").val(""); 
      }) 
     } 
    } 
}); 

My chat.

Answer 1

У вас не может быть события внутри события.

Удалите это событие click из кода сохранения нажатия клавиши.

$('.chav_box_in').keypress(function(e) 
{ 

    if (e.keyCode == 13) 
    { 
     if ($(this).val()!=""){ 

       $("#chatlog").append(myli); 
       $(".usertext").val(""); 
     } 
     } 


}); 

Answer 2

Вы создаете прослушиватель событий щелчка на элементе #send каждый раз, когда вы вводите нажатие клавиши, а не нажимая это событие.

Если смысл сделать ввести нажатие и сделать кнопку Отправить кнопку для добавления сообщений Вы можете сделать одну функцию и передать его в качестве аргумента методов слушателя событий JQuery

function appendChat(e) { 
    var id = e.target.id; 
    //variables for testing, you could have all of the 
    //comparisons in the 'if' statement, just using these to 
    //make the 'if' statement more clear 
    var notEmpty = $(".usertext").val() != "", 
     isEnterKeypress = e.type == "keypress" && e.keyCode == 13, 
     isSendClick = e.type == "click" && id == "send"; 

    if(notEmpty && (isEnterKeypress || isSendClick)) { 
     var txt = "<b>me:</b>"+$(".usertext").val(); 
     $("#chatlog").append($("<li>").html(txt)); 
     $(".usertext").val(""); 
    } 
} 

$("#send").click(appendChat); 
$(".chav_box_in").keypress(appendChat); 

Demo

function appendChat(e) { 
 
    var id = e.target.id; 
 
    var notEmpty = $(".usertext").val() != "", 
 
     isEnterKeypress = e.type == "keypress" && e.keyCode == 13, 
 
     isSendClick = e.type == "click" && id == "send"; 
 

 
    if(notEmpty && (isEnterKeypress || isSendClick)) { 
 
    var txt = "<b>me:</b>"+$(".usertext").val(); 
 
    $("#chatlog").append($("<li>").html(txt)); 
 
    $(".usertext").val(""); 
 
    } 
 
} 
 

 
$("#send").click(appendChat); 
 
$(".chav_box_in").keypress(appendChat);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="chatlog"></ul> 
 
<input class="usertext chav_box_in"><button id="send">Send</button>