jQuery：輸入值在keyup上丟失？

我有一個簡單的表單，當用戶在輸入字段上按下回車鍵時，我想提交一個簡單的表單（即火ajax）。如果我按提交按鈕，事件觸發正常，但是當使用鍵控來觸發完全相同的功能時，輸入字段的值爲空。我嘗試使用$（this）.val（）傳遞輸入字段的值（來自keyup函數），但傳遞的參數仍爲空。jQuery：輸入值在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); 
    . 
    . 
    . 
}

來源

2012-07-15 KG Christensen

它似乎在這裏正常工作，對不對？（http://jsfiddle.net/swz5c/） – Abraham 2012-07-15 13:43:21

我忘了提及它確實有效，但有時只是（通常不）。這反過來又使得解決問題變得更加困難。儘管如此，我只在Chrome和FF中進行過測試。 – 2012-07-15 13:45:05

嗯，你可以在jsfiddle.net上用你的HTML和JS設置一個小提琴嗎？ – Abraham 2012-07-15 13:51:14

我注意到您的小提琴一兩件事，可能會導致此。在使用表單字段時，我注意到有時候我收到了一個警告，說明'只有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/

小提琴。行爲現在是一致的。

來源

2012-07-15 15:41:39 Fresheyeball

優秀 - 很好的回覆和解釋。我採用了＃2建議，現在適用於所有目標瀏覽器。 – 2012-07-15 16:11:43

試試這個：

$(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-15 13:44:02 undefined

@KGChristensen在DOM準備好被操縱之後，是否使用'$（document）.ready（）'？ – undefined 2012-07-15 13:50:14

我已經嘗試了兩個（只是爲了它的地獄），目前它駐留在doc.ready中。小更新：似乎現在在Chrome中工作（在添加了Raminson的建議並強制清理Tomcat之後...）。儘管在Firefox中沒有運氣。 – 2012-07-15 14:01:04

上面劃傷。查看更新的第一篇文章。 – 2012-07-15 15:30:15

jQuery：輸入值在keyup上丟失？

回答

相關問題