How to receive the current html code with html() after changed input value?

Question

Ok to demonstrate what I mean I created this little jsfiddle: http://jsfiddle.net/B2FZb/

It is a pretty useless function. If you type "a" into the first input field the html source code of the wrapper div is displayed. But it's still the old value. All I need to know is: How do I get the html source code with the new value?

Is there another way than html() or a special event listener to get it?

Here the code:

JS:

$(document).ready(function () {
    console.log('ready');
    $('.input1').keyup(function () {
        console.log('changed');
            if ($('.input1').val() == "a") {
                var source = $('#input_wrapper').html();
                alert(source);
            }
    });
});

HTML:

<div id="input_wrapper">
   <input type="text" value="abc" class="input1">
   <input type="text" value="def">
</div>
<div id="get_html_code">get html source code</div>

Answer 1

Reason is you used value attribution,it does not change with typed text value, so try this it will change according to user entered input

$('.input1').keyup(function () {
        console.log('changed');                    
        if ($('.input1').val() == "a") { 
            $(this).attr('value',$(this).val()) // this line will change value
            var source = $('#input_wrapper').html();
            alert(source);
        }                    
});

DEMO