jquery不止一次调用函数

我正在创建一个移动应用程序，我正在调用函数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('
' + row.buildingaddress + '........' + row.buildingcode + '
'); } 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('
' + row.flatdescription + '...' + row.flatname + '
'); } 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

我认为这是使用live的click处理程序。 在document或body上live附加事件处理程序并侦听我们传递的选择器。 每当你调用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都将重新运行。

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

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