2

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

更新二：问题仅在初始加载时出现。点击刷新后，事件按预期触发。在 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);
   .
   .
   .
}
4

2 回答 2

1

我注意到你的小提琴可能导致这种情况的一件事。在使用表单域时，我注意到有时我会收到一条提示“仅 4 位数字”的警报，但通常我没有。问题是你的form标签。点击回车会触发浏览器的默认行为：非 ajax 表单提交。如果这在您$.GET运行之前完成，它将与您描述的行为一致，刷新后 js 被缓存，然后可能会更快地评估允许 $.get 在提交和刷新发生之前。它只是一个理论，但最终它给你留下了两个选择：

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

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

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

http://jsfiddle.net/9TYhT/

上面拨弄。行为现在是一致的。

于 2012-07-15T15:41:39.770 回答
0

尝试这个：

$(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
        }
    });

  // ...
})
于 2012-07-15T13:44:02.463 回答