Can't get value from input text on keyup with jquery

Question

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

Answer 1

editables is still the <td> tag based on your updated code, not the input that is now inside. Use the .find to target the new input tags instead.

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

(Answer to updated question above)

---

(Answer to original question below)

First, you need to move your .html() statement inside the .on('keyup'. Otherwise it will run only once and before keyup has occurred. Essentially what you are doing is: 1. initialize value. 2. set current.html to the initialized variable with no value (undefined). 3. Listen for keyup. 4. On keyup change value of the variable and do nothing.

When .html() is inside the .on it will run only after keyup and on each keyup. Which guarantees value will be more than initialized before its used.

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

});

assuming editables are regions in which you wish to display the outcome of the text field. The current editable is not the text field itself and will not respond to keyup or .val()

OR

If editables are actually the text fields themselves, then they have no interior and you cannot use .html() on them. Nor should you want to. So assuming you DO with to output the result on the page somewhere.

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