1

我有一个 iOS 科尔多瓦应用程序。我有一个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);});
        });
    }
};

另一个编辑

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

4

1 回答 1

2

从你所说的我认为你有多个事件绑定的问题。与经典网页不同，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并查找主题：防止多事件绑定/触发。

于 2013-05-20T20:30:18.150 回答