函数为每个交互运行额外的时间

Question

I use the following code to create dynamicaly a select menu

$('#homecomments').live('pagebeforeshow', function() {
    getTitlesComments();
});

function getTitlesComments() {
    notesdb.transaction(function(t) {
        t.executeSql('SELECT buildingcode, buildingaddress FROM buildings ORDER BY buildingaddress ASC', [], function(t, result) {
            t.executeSql('SELECT DISTINCT buildingcode FROM bill', [], function(t, resultflat) {
                var j,
                    lenflat = resultflat.rows.length,
                    rowflat;
                var i,
                    len = result.rows.length,
                    row;
                //alert(len); 
                if (len > 0 ) {

                    for (i = 0; i < len; i += 1) {
                        row = result.rows.item(i);
                        for (j = 0; j < lenflat; j += 1) {
                            rowflat = resultflat.rows.item(j);
                            if (rowflat.buildingcode == row.buildingcode){
                                 $('#opt1').append('<option value="' + row.buildingcode + '">' + row.buildingaddress + '........' + row.buildingcode + '</option>');
                            }
                        }
                     }
                     $("#opt1").selectmenu('refresh');
                     $("#opt1").change(function() {
                         alert($( "#opt1 option:selected" ).text());
            });
        }


    })
})

Below is my html code of this page

<div data-role="page" id="homecomments">
<div data-role="header">
    <h1>Σχόλια</h1>
    <a href='#home' class='ui-btn-left' data-icon='home' data-theme="a" data-iconpos="notext">Home</a>
</div>
<div data-role="content">
    <div id="entriescomments">
    </div>

    <br>
    <select name="building" id="opt1" data-native-menu="false">
        <option>Πολυκατοικία</option>
    </select>
    <br>
    <select name="flat" id="opt2" data-native-menu="false">
        <option>Διαμέρισμα</option>
    </select>
    <br>
    <input name="flatcommentname" id="flatcommentname" class="flatcomname" type="text" value="" placeholder="Ονοματεπώνυμο"/>

    <div data-role="fieldcontain">
        <label for="textarea"></label>
        <textarea name="flatcomment2" id="flatcomment2" class="flatcom2" placeholder="Παρατήρηση"></textarea>
    </div>  
    <div align="center" style="margin: 25px 0px 0px 0px;">
        <a href="#" id="commentsformbutton"  data-role="button" data-theme="e" >OK</a>
    </div>
</div>

The first time the user visits the page the above code alerts the correct text once. The second time the user visits the page, after leaving, the code alerts the correct text but twice. The third time three times and so on.

Also the menu the first time has all the options. The second the menu hes all the option but twice and so on.

I try to reset select with

$('select"#opt1 option').removeAttr('selected');

but the problem is not solved.

Where am I wrong??

Answer 1

You are attaching the change event toon each pageshow. Instead, attach it once on pagecreate:

$(document).on("pagecreate", "#homecomments", function(){

    $(document).on("change", "#opt1", function() {
        alert($( "#opt1 option:selected" ).text());
    });

});


$(document).on('pagebeforeshow','#homecomments', function() {
    getTitlesComments();
});