2

I'm trying to get the value of an <input type=text> with the method keyup from jQuery but whenever i log it it logs undefined.

Here is my code:

$.each(editables,function(i){
    current  = $(editables[i]);
    var value;              
    current.on('keyup', function(){
        value = $(this).val();
        console.log( value );
    });
    current.html( value );
});

Thanks in advance

EDIT

I have a table wich displays all the information of a database, and i have a button to edit the information, what i do is i convert all of the <td class="editable"> to an <input type="text"> and i'm trying to get the value from them after i click the button again, i will send the info via $.post() but i can't get the value from these inputs

EDIT 2 Here is the full code of the handler hope it helps, thanks to all that have contributed $('.edit').on('click',function(e){

    $this = $(this);
    editables = $this.parents('tr').find('td.editable');

    if($this.text() == "Save"){
        row  = $this.parents('tr');
        table = row.data('table');
        id = row.data('id');
        field = row.data('field');
        /*
        $.each(editables,function(i){
            current  = $(editables[i]);
            var value;              
            current.on('keyup', function(){
                value = $(this).val();
                console.log( value );
            });
            console.log( current );
            current.html( value );
        });
        */
        editables.each(function(i){
            var current = $(this);
                value;
            current.on('keyup',function(){
                value = $(this).val();
                console.log(value);
            })
        });

        $this.val('Edit');  

    } else {            

        $.each(editables,function(i){
            current  = $(editables[i]);
            currentValue = current.text();

            current.html("<input type='text' value='"+currentValue+"'></input>");
        });     

        $this.val('Save');
    }

    e.preventDefault();
});

UPDATE
there was something else wrong in my code outside of the one i shared here that messed up the funcionality.
Thanks to everyone who helped

4

1 に答える 1

3

editablesは、<td>現在内部にある入力ではなく、更新されたコードに基づくタグのままです。代わりに を使用し.findて、新しい入力タグをターゲットにします。

   editables.find('input').each(function(i){
        var current = $(this);
            value;
        current.on('keyup',function(){
            value = $(this).val();
            console.log(value);
        })
    });

(上記の更新された質問への回答)

（以下の元の質問への回答）

.html()まず、ステートメントを 内に移動する必要があります.on('keyup'。それ以外の場合は、発生する前に 1 回だけ実行されますkeyup。基本的にあなたがしていることは次のとおりです。 1.初期化しますvalue。2.current.html値のない初期化された変数 ( undefined) に設定します。3. を聞きkeyupます。4.keyup変数の値を変更しても何もしません。

.html()が の内部にある場合は、 の後およびそれぞれで.onのみ実行されます。どの保証が使用前に初期化されるか。keyupkeyupvalue

$.each(editables,function(i){
    current  = $(editables[i]);
    var value; 
    var currentTextField = $('#theInput'); //should be relational to the editable, not a straight selection query as shown here             
    currentTextField.on('keyup', function(){
        value = currentTextField.val();
        console.log( value );
        current.html( value );
    });

});

編集可能なものは、テキスト フィールドの結果を表示したい領域であると仮定します。currenteditable はテキスト フィールド自体ではなく、keyupまたは.val()

また

editables が実際にテキスト フィールド自体である場合、それらには内部がなく、使用できません.html()。また、したい必要はありません。したがって、ページのどこかに結果を出力するために行うと仮定します。

$.each(editables,function(i){
    current  = $(editables[i]);
    var value; 
    var currentTextField = $('#outPutLocation'); //should be relational to the editable, not a straight selection query as shown here             
    current.on('keyup', function(){
        value = current.val();
        console.log( value );
        currentTextField.html( value );
    });     
});
于 2012-06-12T15:45:22.153 に答える