jquery - selecting data in the same div using jquery

Question

I want to make a small calculation page like this

1000 X _ = 
 500 X _ = 
   Total = 

What I want to do is when someone enters a numeric value in "_" I automatically show the multiplication and also than the total sum.

<div>
    <div> 
        <span class="value">1000</span> X
        <input type="text" size="4" class="inputdata"/> = 
        <span class="multiplydate"></span>
    </div>
    <div>
        <span class="value">500</span> X
        <input type="text" size="4" class="inputdata" /> = 
        <span class="multiplydate"></span>
    </div>
    <div>
        TOTAL = 
        <span class="totaldata"></span>
    </div>
</div>

then use jquery to do the calculation:

$('.inputdata').live('onChange', function () {
    $(this).closest('.multiplydata').html(
        $(this).closest('.value').html() *         
            $(this).closest('.inputdata').val()
    );
});

Whats wrong with the code?? nothing seems to be happening.

Answer 1

live has been replaced with on Please change to:

$('.inputdata').on('onChange',function(){ 
       $(this).closest('.multiplydata')
       .html($(this).closest('.value')
       .html()*$(this).closest('.inputdata').val());
 });

Answer 2

Changes :

• onchange has been replaced by keyup
• $('.multiplydata') is Next to the Textbox So change Closest to Next

Fiddle Example : http://jsfiddle.net/RYh7U/113/

Jquery :

$('.inputdata').live('keyup', function () {
    var SpanData = $(this).closest(":has(.value)").find('.value').html();
    var Result = $(this).next(".multiplydate");
    Result.html(SpanData * $(this).val());  

    //Total Part
    var sum=0;
    $('.multiplydate').each(function() {
        sum += Number($(this).html());        
    });
    $(".totaldata").html(sum);
});