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

Question

我使用以下代码动态创建一个 select 菜单

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

用户第一次访问该页面时，上面的代码会提示一次正确的文本。用户第二次访问页面时，在离开后，代码会提示正确的文本两次。第三次三次以此类推。

而且第一次的菜单有所有的选项。第二个菜单是所有选项，但两次等等。

我尝试用

重置select

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

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

Function runs an additional time for each interaction

javascript

jquery

select

jquery-mobile