Question

我有一个iOS cordova应用程序。我有navigator.notification.prompt出现（如预期的那样）以允许用户重命名特定的无线电频道。问题是如果再次单击“重命名”按钮（即使在导航到其他页面等之后），提示会显示在应用程序生命周期中单击它的次数。（例如：如果这是第二次点击，它会显示两次。第三次，3次等等。）

Javascript：

//***ChannelDetails***//

var ChannelDetails = {
    Load: function (id) {
        Data.db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM Channels WHERE ID=?', [id], function (tx, results) {
                $('#channel-info').empty().append(
                    $('<strong/>').html(results.rows.item(0).Name),
                    $('<p/>').html("Zone: " + results.rows.item(0).Zone),
                    $('<p/>').html("Channel: " + results.rows.item(0).Channel),
                    $('<p/>').html("Frequency: " + results.rows.item(0).Frequency)
                );
                $('#channel-rename').data('id', id).data('name', results.rows.item(0).Name).on('click', function () {
                    ChannelDetails.Rename($(this).data('id'), $(this).data('name'));
                });
                $('#channel-delete').attr('data-id', id).on('click', function () {
                    ChannelDetails.Delete($(this).attr('data-id'));
                });
            });
        });
    },
    Rename: function (id, name) {
        navigator.notification.prompt("Set a name for the channel:", function (results) {
            if(results.buttonIndex === 1) {
                Data.db.transaction(function (tx) {
                    tx.executeSql('UPDATE Channels SET Name=? WHERE ID=?',[results.input1,id]);
                });
                $('#channel-details').dialog('close');
                $('#channel-list').empty();
                RadioChannels.Load();
            }
        }, name, ["Save", "Cancel"]);
    },
    Delete: function (id) {
        Data.db.transaction(function (tx) {
            tx.executeSql('DELETE FROM Channels WHERE ID=?',[id]);
        });
        $('#channel-details').dialog('close');
        $('#channel-list').empty();
        RadioChannels.Load();
    }
};

HTML：

<!--Radio Channels-->
<div id="radio-channels" data-role="page" data-theme="a">
    <div data-role="header">
        <a href="#home">Back</a>
        <h1>Channels</h1>
    </div>
    <div data-role="content">
        <a href="#add-channel" data-role="button">Add Channel</a>
        <ul id="channel-list" data-role="listview" data-inset="true"></ul>
    </div>
</div>
<!--Channel Details-->
<div id="channel-details" data-role="page" data-theme="a">
    <div data-role="header">
        <h1>Channel</h1>
    </div>
    <div data-role="content">
        <div id="channel-info"></div>
        <button id="channel-rename">Rename</button>
        <button id="channel-delete">Delete</button>
    </div>
</div>

这是非常令人困惑的行为。

修改

因此，经过进一步测试后，我发现点击按钮的次数不是导致倍数的次数，而是加载channel-details页面的次数。我将发布下面的代码如何打开，因为这似乎以某种方式影响它。注意我使用的是jQuery-mobile，这个页面是作为对话框打开的。

//***Radio Channels***//

var RadioChannels = {
    Init: function () {
        $('a[href=#radio-channels]').on('click', function () {RadioChannels.Load();});
    },
    Load: function () {
        $('#channel-list').empty();
        Data.db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM Channels', [], function (tx, results) {
                var i;
                for(i=0; i<results.rows.length; i++) {
                    $('#channel-list').append(
                        $('<li/>').append(
                            $('<a/>').attr('href', "#channel-details").attr('data-rel', "dialog").attr('data-id', results.rows.item(i).ID).append(
                                $('<strong/>').html(results.rows.item(i).Name),
                                $('<p/>').html("Zone: " + results.rows.item(i).Zone),
                                $('<p/>').html("Channel: " + results.rows.item(i).Channel),
                                $('<p/>').html("Frequency: " + results.rows.item(i).Frequency)
                            ).on('click', function () {
                                ChannelDetails.Load($(this).attr('data-id'));
                            })
                        )
                    );
                }
                $('#channel-list').listview('refresh');
            }, function (error) {alert(error.code + " " + error.message);});
        });
    }
};

另一个编辑

我将其切换回常规页面，而不是对话框，我得到的结果相同......是否创建了多个实例？这是内部错误吗？

Answer 1

根据您的说法，我认为您遇到多个事件绑定问题。与传统网页不同，jQuery Mobile是独一无二的，如果您不注意，可以将多个事件绑定到单个对象。

Fir示例此代码：

$('a[href=#radio-channels]').on('click', function () {RadioChannels.Load();});

应该是：

$('a[href=#radio-channels]').off('click').on('click', function () {RadioChannels.Load();});

如果想了解有关多个事件绑定的更多信息以及如何解决它（使用示例），请查看我的其他答案： jQuery Mobile: document ready vs page events 并查找主题：防止多事件绑定/触发。

iOS Cordova用户提示多次显示

1 个答案: