2015-12-27 47 views
0

我有相同類的一系列動態生成的輸入,例如:檢索從輸入端上.focusout .VAL()()

<input class="addressitem" type="text"/> 
<input class="addressitem" type="text"/> 
<input class="addressitem" type="text"/> 

用戶輸入數據到每個字段我想利用該後數據並將其放置在隱藏輸入的值字段中。

但是,我很難找出最好的方法來做到這一點。到目前爲止,我已經試過:

$(".addressitem").focusout(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
}); 

$(".addressitem").change(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
}); 

但我不能得到任何東西出現在控制檯中。

任何人都可以指向正確的方向嗎?

回答

3

只要您在document.ready事件中定義它們,並且您的頁面中沒有任何其他腳本錯誤,則您的兩種方法都應該可以正常工作。

$(function(){ 

    $(".addressitem").change(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
    }); 

    $(".addressitem").focusout(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
    }); 

}); 

您可以使用瀏覽器控制檯來驗證頁面中是否存在其他腳本錯誤。

還要記住,change事件發生在文字輸入欄位焦點不在時。所以當用戶改變文本框的焦點時,你會看到console.log。如果你想立即更新,你應該考慮使用keyUp事件

Here是一個工作示例。


編輯:按照註釋我有一個jQuery的點擊功能所產生的場。我必須在點擊功能中移動我的代碼才能使其工作。

不,你不需要。你可以簡單地使用jQuery on委託方法。當您註冊一個事件處理程序jQuery on時,它將適用於DOM中的當前和將來元素(動態注入)。

所以,你的代碼將

$(function(){ 

    $(document).on("change",".addressitem",function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
    });  

}); 
+0

這取決於什麼事件OP想做的動作。只有當用戶從輸入字段失去焦點時(至少在輸入「type =」text「時),」change「和」focusout「纔會起作用。 – Rayon

+1

是的。這是絕對正確的。 – Shyju

+0

謝謝 - 是的,你是對的。你幫我發現的問題是我有由Jquery點擊函數生成的字段。我必須在點擊功能中移動我的代碼才能使其工作。 – MeltingDog

0

這可能是最好的選擇,因爲你說他們是動態生成的輸入。

$(document).on("blur",".addressitem",function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
}); 

WORKING FIDDLE

檢查您的控制檯