Question

我正在创建一个移动应用程序，我正在调用函数getItem传递data-trnote val。

function getTitles() {
    $(document).ready(function(e){
        var list = $('#recent'),
            items = [];
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT buildingcode, buildingaddress FROM buildings ORDER BY buildingaddress ASC', [], function(t, result) {
                var i,
                    len = result.rows.length,
                    row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        row = result.rows.item(i);
                        items.push('<li><a href="#display" data-trnote="' + row.buildingcode + '">' + row.buildingaddress + '........' + row.buildingcode + '</a></li>');
                    }
                    list.html(items.join('\n'));
                    list.listview('refresh');
                    $('a', list).live('click', function(e) {
                        getItem($(this).attr('data-trnote'));
                    });
                    $('#entries').show();
                } else {
                    $('#entries').hide();
                }
            })
        });
    });
}

getItem代码如下

function getItem(buildingcode) {
alert(buildingcode);
    $(document).ready(function(){
        var list = $('#recentflats'),
            items = [];
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT buildingaddress, buildingcode FROM buildings WHERE buildingcode = ?',[buildingcode], function(t, resultbuilding) {
                var myrow;
                myrow = resultbuilding.rows.item(0);
                $('#display h1').text(myrow.buildingaddress);
            })
        });
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT DISTINCT flatdescription, flatname, buildingcode FROM bill WHERE buildingcode = ?',[buildingcode], function(t, resultflat) {
                var i,
                    len = resultflat.rows.length,
                    row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        row = resultflat.rows.item(i);
                        items.push('<li><a href="#displayflat" data-flat="' + row.flatname + '" data-description="' + row.flatdescription + '">' + row.flatdescription + '...' + row.flatname + '</a></li>');
                    }
                    list.html(items.join('\n'));
                    list.listview('refresh');
                    $('a', list).live('click', function(e) {
                        getItem1($(this).attr('data-flat'), $(this).attr('data-description'));
                    });
                    $('#entriesflat').show();
                } else {
                    $('#entriesflat').hide();
                }
            })
        });
    });
}

这两个函数都创建了动态列表视图。

getTitles函数显示公司的建筑物，而getItem显示所选建筑物的单位。

我包含警报（buildingcode）;找出问题，但我无法理解什么是错误。

第一次一切都好。当我回到getTitles并转发到getItem时，警报显示两次......当我返回并向前转发警报显示3次然后继续4次... 5次......

并且此时所有代码都重复作为警报...

什么是错的

提前了解你的时间

Answer 1

我认为使用click的是live处理程序。 live在document或body上附加事件处理程序，并侦听我们传递的选择器。每当你致电getTitles时，它都会附加一个新的处理程序。

查看代码时，无需使用live只需使用click处理程序，它就能正常工作。

在getTitles

中更改此内容

    $('a', list).click(function(e) {
        getItem($(this).attr('data-trnote'));
    });

内部getItem方法

    $('a', list).click(function(e) {
         getItem1($(this).attr('data-flat'), $(this).attr('data-description'));
    });

Answer 2

您对live的调用会在每次调用函数时分配一个新的事件处理程序。在添加新处理程序之前删除旧处理程序：

$('a', list).die('click');
$('a', list).live('click', …);

或者，您应该可以使用click代替live。

Answer 3

我相信你把你的标签放在div [data-role =“page”]里面吗？由于jQM通过AJAX引入该div中的所有内容，因此只要页面加载，JS就会重新运行。

如果您正在附加多个直播事件，即使使用live也无济于事，解决方案是正确使用jQM的pageinit事件仅运行一次代码。封装事件处理程序很棘手，我建议使用on事件处理程序。

无论如何你不能只是跳进jQuery mobile而不了解jQM是如何工作的，你正在使用document.ready并使用全局选择器，你可以想象当你在一个DOM中加载了几个页面时会爆炸。在这里查看类似的问题以获得更详细的概述：https://stackoverflow.com/a/9085014/737023

jquery不止一次调用函数

3 个答案: