jquery函数执行了不止一次

Question

I am in mobile app.

I have a function that create a dynamic checkbox (getItem1) and inside this function I call another one that update sqlite .

function getItem1(flatname, flatdescription) {

    $(document).ready(function(){
    $('#Code').empty();
    $('#displayflat article3').empty();
    $('#displayflat article1').empty();
    $('#displayflat article2').empty();
    $('#shares').val('');
    });
        var gtotal=0;
        var total = 0;
        var payment = 0;
        var previouspayments = 0;
        var sofeilon = 0;
        var total1 = 0;
        var payment1 = 0;
        var previouspayments1 = 0;
        var sofeilon1 = 0;
        var len = 0;
        var list = $('#Code'),
            allbarcode = [],
            my = {},
            barcode = [],
            barcodeamount = [],
            barcodeprevious = [],
            items = [];

        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT barcode, buildingcode, buildingaddress, flatname, flatdescription, entryseason, period, amount, pastpayments, todaypayments, paydate, receiptno FROM bill WHERE flatname = ? AND flatdescription = ?',
            [flatname, flatdescription],
            function(t, resultflatname) {
                var i,
                    ib,
                    len = resultflatname.rows.length,
                    row = 0,
                    rowprev = 0,
                    rowb = 0;

                for (i = 0; i < len; i += 1) {
                    row = resultflatname.rows.item(i);

    if (row.amount > row.todaypayments + row.pastpayments) {
                    if (row.receiptno == 0){
                        items.push('<input type="checkbox" name="code_'+ i +'" id="code_'+ i +'" value="' + row.amount + '" previous="' + row.pastpayments + '" barcode="' + row.barcode + '" todayp="' + row.todaypayments + '"/><label for="code_'+ i +'">' + row.period +'..........'+ row.amount+'</label></br>');
                    } else {
                    if ((row.receiptno > 0) && (row.amount > row.todaypayments + row.pastpayments)){
                        items.push('<input type="checkbox" name="code_'+ i +'" id="code_'+ i +'" value="' + row.amount + '" previous="' + row.pastpayments + '" barcode="' + row.barcode + '" todayp="' + row.todaypayments + '"/><label for="code_'+ i +'">' + row.period +'..........'+ row.amount+'</label></br>');


                    }
    }
                }
                        allbarcode[i] = row.barcode;
    //                  barcodeamount[i] = row.amount;
    //                  barcodeprevious[i] = row.pastpayments;
                        previouspayments1 = previouspayments1 + row.pastpayments;
                        previouspayments = previouspayments1.toFixed(2);
                        sofeilon1 = sofeilon1 + row.amount;
                        sofeilon = sofeilon1.toFixed(2);
                        total1 = sofeilon - previouspayments;
                        total = total1.toFixed(2);

                    list.html(items.join('\n'));

                $('#displayflat h1').text(row.flatname);
                $('#displayflat article').html('<h2>Flatname : ' + row.flatdescription + '</h2>');
                if (total != 0){
                    $('#displayflat article1').html('<p>Total : ' + total + '</p>');
                    $('#displayflat article2').html('<p>Months Total : ' + sofeilon + '</p>');
                }
                if (previouspayments != 0) {
                    $('#displayflat article3').html('<p>Previous Payments : <font color="red">' + previouspayments + '</font></p>');
                }
        }

                function calcTotal() {
                    $("input:checked").each(function() {
                        var value = [$(this).attr("value")]-[$(this).attr("previous")];
                        payment = payment + parseFloat(value); //total = total + value          
                    });
                }

                function barcodeTotal() {
                    barcode = [];
                    barcodeamount[i];
                    barcodeprevious[i];
                    $("input:checked").each(function(i) {
                        barcode[i] = $(this).attr("barcode");
                        barcodeamount[i] = $(this).attr("value");
                        barcodeprevious[i] = $(this).attr("previous");
                    });
                }

                calcTotal();
                $("#Payment").html('<p class="total">Total Payment: <strong>' + payment.toFixed(2) + '</strong></p>');

                $("input:checkbox, input:radio").click(function() {
                    payment = 0;
                    calcTotal();
                    $("p.total").html("Total Payment: <strong>" + payment.toFixed(2) + "</strong>");
                });

                $('#shares').keyup(function(){
                    payment = 0;
                    calcTotal();
                    gtotal = ($('#shares').val() * 1) + payment;
                    gtotal = gtotal.toFixed(2);
                    $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
                });


                $('#shares').keyup(function(){
                    $("input:checkbox, input:radio").click(function() {
                        payment = 0;
                        calcTotal();
                        gtotal = ($('#shares').val() * 1) + payment;
                        gtotal = gtotal.toFixed(2);
                        $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
                    });
                }); 

                $("#pay").click(function(e) {
                    barcodeTotal();
                    updateItem(payment.toFixed(2), gtotal, barcode, barcodeamount, barcodeprevious, allbarcode);
                });

            })
        });
}

and the code of updateItem. I use alert just to watch how many times executed.

function updateItem(payment, gtotal, barcodetotal, barcodeamount, barcodeprevious, allbarcode) {
alert(allbarcode);
alert(barcodeamount);
alert(barcodeprevious);
    var i,
        j,
        len = barcodetotal.length,
        lenall = allbarcode.length,
        today,
        receiptno,
        row = [],
        barcodeamount,
        barcodeprevious,
        enanti = 0,
        newbarcode,
        pasttotal,
        minimum = 0,
        myrow;

    $.mobile.notesdb.transaction(function(t) {
        t.executeSql('SELECT userid, name, receiptno FROM collector', 
            [], function(t, resultcollector) {
                myrow = resultcollector.rows.item(0);
                receiptno = myrow.receiptno + 1;
                t.executeSql('UPDATE collector SET receiptno = ?', [receiptno]);

                if (payment > 0 && gtotal == 0) {
                    for (i = 0; i < len; i += 1) {
                        row = barcodetotal[i];
                            for (j = 0; j < lenall; j += 1) {
                                if (allbarcode[j] == row){
                                    var place = j;
                                }
                            }
                        allbarcode.splice(place, 1);
                        barcodeprevious.slice(place, 1);

                        today = barcodeamount[i] - barcodeprevious[i];
                        var billtoday = barcodeamount[i];
                        t.executeSql('UPDATE bill SET pastpayments = ?, receiptno = ?, paydate = date("now") WHERE barcode = ?', [billtoday, receiptno, row]);
                        t.executeSql('INSERT INTO billpayments (barcode, amount, collectorid, receiptno) VALUES (?,?,?,?)',
                            [row, today, myrow.userid, receiptno]);
                    }
                }


                    if (gtotal > 0) {   
                        enanti = gtotal - payment;
                        //alert(enanti);
                        var minimum = Math.min.apply( null, allbarcode );
                        alert(minimum);
                        t.executeSql('SELECT barcode, amount, pastpayments, todaypayments FROM bill WHERE barcode = ?',
                            [minimum], 
                            function(t, previousp) {
                                var myr = previousp.rows.item(0);
                                var todaypp = myr.pastpayments + enanti;

                                t.executeSql('UPDATE bill SET pastpayments = ?, todaypayments = ?, receiptno = ?, paydate = date("now") WHERE barcode = ?', [todaypp, enanti, receiptno, minimum]);
                                t.executeSql('INSERT INTO billpayments (barcode, amount, collectorid, receiptno) VALUES (?,?,?,?)',
                                    [minimum, enanti, myrow.userid, receiptno]);
                        });
                    }






                    $.mobile.changePage('#display', 'slideup', false, true);
            })
    });

}

When getItem1 executed for the first time everything is OK.

For the second time of getItem1 the updateItem executed I think twice.

The third time of getItem1 the updateItem 3 times and so on.

After all that I cannot watch if the data are ok...

Answer 1

You're hooking up your click event more than once. Each time through you need to remove the click event.

Change your line for:

$("#pay").click(function(e) {

to:

$("#pay").unbind('click').click(function(e) {

Answer 2

Move

            $("#pay").click(function(e) {
                barcodeTotal();
                updateItem(payment.toFixed(2), gtotal, barcode, barcodeamount, barcodeprevious, allbarcode);
            });

Outside of the function, into the document.ready and use on http://api.jquery.com/on/