在按回车键时触发 jQuery 事件
Fire jQuery event on enter key press?
我正在尝试使用 jQuery 提交一个 rails 表单(我对此知之甚少),并且成功地设置了一个表单,以便在单击提交按钮并运行回调时提交(我相信这是正确的术语?),但我也想让它在按回车键时工作。
就目前而言,按 Enter 会将数据提交到数据库,但不会运行命令来附加div 或清除文本字段。我怎样才能做到这一点,以便它对 Enter 键的工作方式与对提交按钮的工作方式相同?我试图将代码包装在一个函数中,该函数将在按下 Enter 时运行,但没有运气!
function runScript(e) {
if (e.keyCode == 13) {
msg = json.msg;
foreign = json.foreign_speaker;
msg_translated = json.msg_translated;
//The HTML that we will append to the document.
html = "<div class='msg msg" + foreign + "'>" + msg +
"</div> <div class='msg msg" + foreign + "-translation'>" + msg_translated + "</div>"
// Append new message.
$('.chatmessages').append(html).fadeIn('fast');
scrollToBottom(500)
// Clear form with jquery.
$('#message_msg').val('');
$('#message_foreign_speaker').attr('checked', false);
}
}
我试过了,但没有运气。
我当前的按钮工作,JS文件:
var scrollToBottom = function(anim){
var myDiv = $(".wrap");
myDiv.animate({ scrollTop: myDiv[0].scrollHeight - myDiv.height() }, anim);
};
$(document).ready(function(){
scrollToBottom(0)
//JS to POST form
$('.submit').click(function() {
var valuesToSubmit = $('.msgform').serialize();
$.ajax({
type: 'POST',
url: window.location.href + '/messages', //sumbits it to the given url of the form
data: valuesToSubmit,// { chat_id, <%= @chat.id %> },
dataType: "JSON", // you want a difference between normal and ajax-calls
})
.done(refresherFunc)
.fail(function(){
alert("Error sending message. It would be nice to make this a flash error.");
});
return false; // prevents normal behaviour
})
});
var refresherFunc = function(json) {
// Get debugging goodies.
console.log(json);
// Set variables with JSON object data
msg = json.msg;
foreign = json.foreign_speaker;
msg_translated = json.msg_translated;
//The HTML that we will append to the document.
html = "<div class='msg msg" + foreign + "'>" + msg +
"</div> <div class='msg msg" + foreign + "-translation'>" + msg_translated + "</div>"
// Append new message.
$('.chatmessages').append(html).fadeIn('fast');
scrollToBottom(500)
// Clear form with jquery.
$('#message_msg').val('');
$('#message_foreign_speaker').attr('checked', false);
}
使用 jQuery 的 submit()
函数捕获表单提交事件,并在其中返回 false。此函数将以您提交表单的任何方式调用(单击提交按钮或按回车键)。返回 false 将阻止浏览器完成表单总和,该表单允许您使用它做任何您想做的事情。
请参阅示例:http://jsfiddle.net/vgk4wu46/
相关文章:
- 在创建对象后附加一个jquery事件
- 将jQuery事件应用于所有类元素
- Jquery事件处理程序仅适用于匿名函数
- 如何在jQuery事件处理程序中存储和重用超时
- 无线电输入更改的jQuery事件未启动
- 我应该/如何清除mousemove JQuery事件侦听器
- 是否可以在jQuery事件中更改Angular范围
- jQuery事件侦听器多次启动
- jQuery 事件处理程序堆叠
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器
- 一个接一个地触发jQuery事件
- 在JQuery事件中查找父元素
- 堆叠jQuery事件(动画)
- 在jquery事件中引用javascript对象
- 动态添加对象的jQuery事件处理程序
- jQuery事件命名空间是否可以包含破折号
- Jquery事件绑定获胜'当作为方法调用时不起作用,但当直接在控制台中调用时会起作用
- 没有为Ajax添加的新元素注册Jquery事件
- 动态创建的DOM元素上的jQuery事件绑定
- jQuery事件未在动态生成的内容上激发