jquery - iOS Cordova 用户提示多次显示

Question

我有一个 iOS cordova 应用程序。我有一个 navigator.notification.prompt 出现(如预期的那样)以允许用户重命名特定的 radio channel 。问题是，如果再次单击“重命名”按钮(即使在导航到其他页面等之后)，提示显示的次数是在应用程序生命周期中被单击的次数。 (例如:如果这是第二次点击，它会出现两次。第三次，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

根据您所说的，我认为您在多事件绑定(bind)方面遇到了问题。与经典网页不同，jQuery Mobile 是独一无二的，如果您不小心，您可以将多个事件绑定(bind)到单个对象。

首先以这段代码为例:

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

应该是:

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

如果想找到更多关于多事件绑定(bind)的信息以及如何解决它(通过示例)，请查看我的其他答案: jQuery Mobile: document ready vs page events 并查找主题:防止多个事件绑定(bind)/触发。