Question

我正在使用jQuery设计聊天室。我想使用＆＃39; Enter＆＃39;将包含用户文字的li附加到ul。键（没有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

您不能在活动中发生活动。

从按键保存代码中删除该点击事件。

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

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

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


});

Answer 2

每次执行enter键时，都会在#send元素上创建一个click事件侦听器，而不是实际触发该事件。

如果您想要输入按键并执行发送按钮单击以添加消息，您可以创建单个函数并将其作为参数传递给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);

演示

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>

添加用户文字＆＃39;输入＆＃39;键入ul（聊天框）jQuery

2 个答案: