Question

我使用以下代码创建动态选择菜单

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

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

1 个答案: