Question

这是我的HTML代码：

<div class="panel-footer">
    <div class="input-group">
        <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
        <span class="input-group-btn">
            <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
        </span>
    </div>
</div>

这是我的jQuery代码：

$('.message').keypress(function (e) {
    if (e.which == 13) {
        var msg = $(this).val();
        var id = $(this).closest('span').next('button.btn_chat').val();
        alert(id+"      "+msg);
        sendMessage(msg,id);
    }
    e.preventDefault();
});

这是我的发送消息功能：

var sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

现在我想在写完邮件后按下按钮时调用我的sendMessge功能。

但是当我按下回车按钮时，我的jQuery没有运行。我该如何解决这个问题？

Answer 1

您正在使用

行

var id = $(this).closest('span').prev('button.btn_chat').val();

但是，在这种情况下，$(this)是<input>元素，不在<span>内。因此.closest('span')将返回一个空集。

Answer 2

Angular提供机制，您可以创建form并使用ngSubmit来绑定要在提交表单时执行的函数。

因此，当 Enter 被按下时，将提交表格。

HTML 的

<div class="panel-footer">
    <div class="input-group">
        <form ng-submit="sendMessage(messageToSend, 79)">
            <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" /> 
          <span class="input-group-btn">
                <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
          </span>
        </form>
     </div>
</div>

在控制器中添加方法

$scope.sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

如果您不想使用form，则可以使用ngKeyup

<input ng-keyup="$event.keyCode == 13 ? sendMessage(messageToSend, 79): null" ng-model="messageToSend" >

按'Enter'键调用功能

2 个答案: