Question

当用户在输入字段上按Enter（返回）时，我有一个简单的表单，我想提交（即fire ajax）。如果我按下提交按钮，则事件触发正常，但是当使用keyup触发完全相同的功能时，输入字段的值为空。我尝试使用 $（this）.val（）传递输入字段的值（来自keyup函数），但传递的参数仍然是空白的。

更新II：问题仅在初始加载时出现。点击刷新事件后按预期触发。在Chrome和FF中测试过。

http://jsfiddle.net/R5QsC/1/

// Value of #pin is blank in getKeyAjax()
$('#pin').keyup(function(e) {
    if (e.keyCode == 13) {
        console.log('DEBUG: Keypress detected (13)')
        getKeyAjax();
    }
});
// Value of #pin is correct in getKeyAjax()
$('#btnPwdCreate').click(function() {
    getKeyAjax();
});

function getKeyAjax() {
    console.log('DEBUG: Starting ... getKeyAjax()');
    var txtPin = $('#pin').val();
    console.log('DEBUG: Value of txtPin: ' + txtPin);
   .
   .
   .
}

Answer 1

我注意到你的小提琴可能会造成这种情况。在使用表单字段时，我注意到有时候我会收到一条警告，说明“只有4位数”，而且通常我没有。问题出在form标记上。按Enter键会触发浏览器的默认行为：非ajax表单提交。如果在$.GET运行之前经历了这种情况，那么它将与您描述的行为一致，刷新js后会缓存，然后在提交和刷新发生之前可以更快地评估允许$ .get。它只是一个理论，但最终它给你留下了两个选择：

从您的HTML中删除<form>标记。
$('form').on('submit', function(e){e.preventDefault();});

1＃将具有无默认提交的效果，因为没有<form>这样做。 2＃覆盖onsubmit事件以阻止默认提交（让您保留表单标记）。

无论这是否解决了你所追求的问题，无论如何你都需要它。它是在输入表单内的输入时执行ajax的关键。

http://jsfiddle.net/9TYhT/

小提琴。行为现在是一致的。

Answer 2

试试这个：

$(document).ready(function(){ // make sure DOM is ready to be manipulated
  // ...

    $('#pin').keyup(function(e) {
        if (e.which == 13) {
            getKeyAjax();
            e.preventDefault() // prevents form from being submitted
        }
    });

  // ...
})

jQuery：keyup上丢失的输入值？

2 个答案: