Функция запускает дополнительное время для каждого взаимодействия

Question

Я использую следующий код для создания dynamicaly меню выбора

$('#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()); 
      }); 
     } 


    }) 
}) 

Ниже мой HTML код этой страницы

<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> 

Первого время, когда пользователь посещает страницу, код выше предупреждает правильный текст один раз. Во второй раз, когда пользователь посещает страницу, после ухода код предупреждает правильный текст, но дважды. В третий раз три раза и так далее.

Также в меню в первый раз есть все варианты. Во втором меню hes все опции, но дважды и так далее.

Я пытаюсь сбросить выбор с

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

, но проблема не решена.

Где я ошибаюсь ??

Answer 1

Вы прикрепляете событие изменения к каждой странице. Вместо этого прикрепите его один раз на pagecreate:

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

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

}); 


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