Question

I did this before with javascript, and have no idea to make it using jquery.

I hope you can help me!

I tried the next:

<script>

$('.field').mouseout(function () {
    var sum = 0;
    $('.field').each(function() {
        sum += Number($(this).val());
    });
      $("#resultado").html(sum.toFixed(2));
});​​​​​​​​​

</script>

The div resultado should change the content. Not happening :/

Answer 1

Try the blur event, not the mouseout

$('.field').blur(function() {
    var sum = 0;
    $('.field').each(function() {
        sum += Number($(this).val());
    });
    $("#resultado").html(sum.toFixed(2));
});

http://jsfiddle.net/syJ9g/1/

---

or bind to all kinds of events

$('.field').bind("mouseout blur click", function() {
    var sum = 0;
    $('.field').each(function() {
        sum += Number($(this).val());
    });
    $("#resultado").html(sum.toFixed(2));
});

http://jsfiddle.net/syJ9g/2/