Question

I am creating an mobile app and I am calling the function getItem passing data-trnote val.

function getTitles() {
    $(document).ready(function(e){
        var list = $('#recent'),
            items = [];
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT buildingcode, buildingaddress FROM buildings ORDER BY buildingaddress ASC', [], function(t, result) {
                var i,
                    len = result.rows.length,
                    row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        row = result.rows.item(i);
                        items.push('<li><a href="#display" data-trnote="' + row.buildingcode + '">' + row.buildingaddress + '........' + row.buildingcode + '</a></li>');
                    }
                    list.html(items.join('\n'));
                    list.listview('refresh');
                    $('a', list).live('click', function(e) {
                        getItem($(this).attr('data-trnote'));
                    });
                    $('#entries').show();
                } else {
                    $('#entries').hide();
                }
            })
        });
    });
}

The getItem code is as follows:

function getItem(buildingcode) {
alert(buildingcode);
    $(document).ready(function(){
        var list = $('#recentflats'),
            items = [];
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT buildingaddress, buildingcode FROM buildings WHERE buildingcode = ?',[buildingcode], function(t, resultbuilding) {
                var myrow;
                myrow = resultbuilding.rows.item(0);
                $('#display h1').text(myrow.buildingaddress);
            })
        });
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT DISTINCT flatdescription, flatname, buildingcode FROM bill WHERE buildingcode = ?',[buildingcode], function(t, resultflat) {
                var i,
                    len = resultflat.rows.length,
                    row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        row = resultflat.rows.item(i);
                        items.push('<li><a href="#displayflat" data-flat="' + row.flatname + '" data-description="' + row.flatdescription + '">' + row.flatdescription + '...' + row.flatname + '</a></li>');
                    }
                    list.html(items.join('\n'));
                    list.listview('refresh');
                    $('a', list).live('click', function(e) {
                        getItem1($(this).attr('data-flat'), $(this).attr('data-description'));
                    });
                    $('#entriesflat').show();
                } else {
                    $('#entriesflat').hide();
                }
            })
        });
    });
}

both functions create dynamic listviews.

The getTitles function displays the buildings of a company while getItem displays the flats of the selected building.

I include alert(buildingcode); to find out the problem but I cannot understand what is the wrong.

The first time everything is ok. When I go back to getTitles and forward to getItem the alert displays twice… when I go back and forward the alert display 3 times and so go on 4 times… 5 times…

and all the code from this point repeated as the alert…

What is wrong?

Answer 1

I think it is the click handler using live. live attachs event handler on the document or body and listens to the selector which we pass. Whenever you call getTitles it will attach a new handler.

Looking at your code there is no need of using live just use click handler it will work fine.

Change this inside getTitles

    $('a', list).click(function(e) {
        getItem($(this).attr('data-trnote'));
    });

Same inside getItem method

    $('a', list).click(function(e) {
         getItem1($(this).attr('data-flat'), $(this).attr('data-description'));
    });