Slider not updating dynamically

Slider not updating dynamically

Hi all
I have the following script that is supposed to do a calculation dynamically when the slider changes value.
It doesn't work. If I manually changes the value in the textbox associated with the slider, the calculation is made and the result presented as I want it.

I am not a programmer, and the code below is most likely a mess, but it (almost) works. I need the page shown on ipad only at an event.


I hope to hear from someone in here. Thanks in advance.


Application can be seen here: http://superfly.dk/e4d/app.html

Code:

<!DOCTYPE html>
<html>
    <head>
   
    <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="my.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.js">
        </script>
        <script src="my.js">
        </script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <!--// load jQuery Plug-ins //-->
    <script type="text/javascript" src="field/jquery.field.js"></script>
    <script type="text/javascript" src="jquery.calculation.js"></script>

    <script type="text/javascript">
    $(document).ready(
        function (){
            // update the plug-in version
            $("#idPluginVersion").text($.Calculation.version);
            // bind the recalc function to the quantity fields
            $("input[name^=qty_item_]").bind("keyup", recalc);
            // run the calculation function now
            recalc();

        }
    );
   
    function recalc(){
        $("[id^=total_item]").calc(
            // the equation to use for the calculation
            //"qty * price",
            "((qty * 4700)-11840)-(qty * 3100)",
            // define the variables used in the equation, these can be a jQuery object
            {
                qty: $("input[name^=qty_item_1]"),
                price: $("[id^=price_item_]")
            },
            // define the formatting callback, the results of the calculation are passed to this function
            function (s){
                // return the number as a dollar amount
                return "Kr. " + s.toFixed(2);
            },
            // define the finish callback, this runs after the calculation has been complete
            function ($this){
                // sum the total of the $("[id^=total_item]") selector
                var sum = $this.sum();
               
                $("#grandTotal").text(
                    // round the results to 2 digits
                    "Kr. " + sum.toFixed(2)
                );
            }
        );
    }
   
   
   
//


    </script>
    </head>
    <body>
 
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h5>
                    beregning
             
                </h5>
            </div>
                   
            <div data-role="content" style="padding: 15px">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="qty_item_1">
                            vælg antal
                        </label>
                        <input name="qty_item_1" id="qty_item_1" value="7.4" min="0" max="100" data-highlight="true" type="range" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain" id="total_item_1" style="display:block; width:100px; height:30px; border:1px solid #dedede;"></div>
               
   
               
            </div>
        </div>

        <script>
        </script>
    </body>
</html>