jqueryが複数回呼び出されました。

Question

私はモバイルアプリを作成していますが、getItemをdata-trnote valを渡す関数を呼び出しています。

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(); 
       } 
      }) 
     }); 
    }); 
} 

両方の機能がdynamicalyリストビューを作成従うよう

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コードがあります。

getTitles関数は会社の建物を表示し、getItemは選択した建物の平面を表示します。

私にはアラート（建築コード）が含まれています。問題を見つけるために私は間違っていることを理解することはできません。

初めての場合はすべて問題ありません。 getTitlesに戻り、getItemに転送すると、アラートが2回表示されます。アラート表示を3回戻して3回進むと、4回... 5回...

とすべてのコード警告として繰り返し、この時点から...あなたの時間

Answer 1

を事前に間違った

THXは、私はそれがliveを使用してclickハンドラと思い

ものです。 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', …); 

、あなたはliveの代わりにclickを使用することができるはずです。

Answer 3

divに[data-role = "page"]のタグを置いていると思いますか？ jQMはAJAX経由でそのdiv内のすべてを取得するので、ページがロードされるたびにJSがすべて再実行されます。

liveを使用しても、複数のライブイベントをアタッチしている場合は役に立ちません。解決策は、jQMのpageinitイベントを使用してコードを1回だけ正しく実行することです。イベントハンドラをカプセル化するのは難しいので、onイベントハンドラを使用することをお勧めします。

とにかくjQMの仕組みを理解していなくても、document.readyを使用し、複数のページが1つのDOMにロードされているときに爆発するグローバルセレクタを使用しています。より詳細な概要については、ここで同様の質問を見てください：https://stackoverflow.com/a/9085014/737023