クリックハンドラのコールバック関数へのデータ収集の参照を渡す

Question

ここに私のコードは当面で構成されている方法は次のとおりです。私は人の名前である（リンクをクリックするたびに

$.post('includes/getPeople.php', {char: character}, function(data) { 
var peopleData = data.people; 

//generation of HTML markup... 

$("#peopleTable a.nameLink").live("click", function(e) { 
var index = $(this).attr("title"); 
console.log(peopleData[index].Email); 
alert(peopleData[index].Email); 
e.preventDefault(); 
    }); 
} 

データベース）、私はこのエラーが表示されます： "peopleDataは未定義です"。この問題を解決する方法はありますか？

ありがとうございます。

Answer 1

この文脈で.live()を使用することは正しくないため、このエラーが発生する可能性が最も高くなります。代わりに.bind()を使用してください。

• Live
• Bind

あなたはその説明を確認した場合、あなたはliveは、新しいHTML要素が追加されるたびにliveにセレクタに一致するbindの延長の形であることがわかりますイベントハンドラは自動的にバインドされます。

AJAX呼び出しを行うたびに、.live()関数を呼び出すと、HTMLマークアップが作成されるたびに新しいハンドラーがリンクに追加されます。

それは意味があると思って、説明するために私の最善を尽くしました。

EDIT：

は、コードを見てみると、peopleDataが今文脈から外れていることが表示されますので、それは存在しません。この変数はポストコールバック関数内で作成され、clickイベントハンドラは関数外に作成されます。

は、次の試してみてください。

$(function() { 
    var letters = $("ul#peopleLetters li"); 
    var current = $("ul#peopleLetters li.selected"); 
    var d = ''; 
    retrievePeople('#'); 
    letters.click(function() { 
     d = $(this).attr("title"); 
     current.removeClass("selected"); 
     current = $(this); 
     $(this).addClass("selected"); 
     retrievePeople(d); 
    }); 

    function retrievePeople(character) { 
     $.post('includes/getPeople.php', {char: character}, function(data) { 
      var peopleData = data.people; 
      var count = data.count; 
      var markup = ''; 
      var countDetails = ''; 
      countDetails = (character == '#') ? count + " Listings Were Found." : count + " Listing(s) Beginning With The Letter '" + character + "'"; 
      if(count == 0){ markup = "No results were found.";} 
      else { 
       //markup stuff [although, a note here, instead of using data.people, you can, and should use peopleData] 
      } 

      $("#peopleTable a.nameLink").bind("click", {data: peopleData}, function(e) { 
       var index = $(this).attr("title"); 
       console.log(data[index].Email); 
       alert(data[index].Email); 
       e.preventDefault(); 
      }); 

     $("#allPeople").html(markup); 
     }, "json"); 
    } 
});