jqueryで.liveを使用している子オブジェクト

Question

私はFacebookのアプリを作成していますが、これはjqueryに苦労しています。簡単な言い方をすれば、私は左の列に写真と名前のリストを持っています。私がそれらをクリックすると、顔が右の列に移動し、左側の列にCSS表示：なしで顔を隠します。したがって、jqueryは、右側の列にリストを動的に追加しています。

また、左側の列の顔をクリックすると、右側の列に移動する前に、その人を選択したことを示すポップアップが表示されます。

これまでのところすべてがうまく働いています（私と一緒にいてください）。私が右手の欄に顔をしたら、右手の欄から顔を削除するオプションがあります。これをクリックすると顔が削除され、その人を削除したというポップアップが表示されます。ポップアップがリスト内の人名を見つけることができず、定義されていないと言うだけで、すべてが機能します。これは私がそれを持っているかもしれないと思った右側の列に人を追加するコード（これは完璧な作品）

$(".list").live("click", function() { 
    var id = $(this).attr("id"); 
    var PersonName = $(this).children('.listcontent').children('.pname').html(); 
    var hiddenid = $("#HiddenField1").val() + '|' + id; 
    $("#HiddenField1").val(hiddenid); 

    var hiddenperson = $("HiddenField3").val() + '|' + PersonName; 
    $("#HiddenField3").val(hiddenperson); 

    var url = "http://graph.facebook.com/" + id + "/picture?type=large"; 
    $("#personimage").attr('src', url); 

    var src = "http://graph.facebook.com/" + id + "/picture?type=square"; 
    var lightboxmessage = "<h2>You have selected " + PersonName + "</h2>"; 
    $("#lightboxcontentright").html(lightboxmessage); 

    $("#lightbox, #lightbox-panel").fadeIn(300) 

    var personexists = findimage(id); 
    if (personexists == "false") { 
     var newperson = "<li class='list1' id='" + id + "A'><div class='listcontent'><img src=" + src + "><label css='pname'>" + PersonName + "</label></div><div class='selectme'><Label>Delete</Label></div></li>"; 
     $("#selectedlist").append(newperson); 
     $(this).css("display", "none"); 

    } 
}); 

これは、右側の列

$(".list1").live("click", function() { 
    var id1 = $(this).attr("id"); 
    var id = id1.substring(0, id1.length - 1); 

    <! -- THIS IS THE BIT THAT DOES NOT WORK 
    var PersonName = $(this).children(".listcontent").children(".pname").html(); 
    alert(PersonName); 
    <!-- END --> 

    var hiddenid = $("#HiddenField1").val(); 
    hiddenid = hiddenid.replace('|' + id, ''); 
    $("#HiddenField1").val(hiddenid); 

    var hiddenperson = $("#HiddenField3").val(); 
    hiddenperson = hiddenperson.replace('|' + PersonName, ''); 
    $("#HiddenField3").val(hiddenperson); 

    var url = "http://graph.facebook.com/" + id + "/picture?type=large"; 
    $("#personimage").attr('src', url); 

    var lightboxmessage = "<h2>You have de-selected " + PersonName + "</h2>"; 
    $("#lightboxcontentright").html(lightboxmessage); 
    $("#lightbox, #lightbox-panel").fadeIn(300); 

    $(this).css("display", "none"); 

    $("#" + id + "").css("display", "inherit"); 
}); 

から顔を削除するためのコードです.live関数と関係するものや、動的にリストを作成するもの。あなたがラベルに「CSS」として「クラス」をスペルミスしている最初のコードブロック内の行で、事前

Answer 1

のコード

おかげで多くの違いがありません見ることができるように。ラベルにはクラスプロパティが設定されません。

var newperson = "<li class='list1' id='" + id + "A'><div class='listcontent'><img src=" + src + "><label css='pname'>" + PersonName + "</label></div><div class='selectme'><Label>Delete</Label></div></li>"; 

に変更し、それを：

var newperson = "<li class='list1' id='" + id + "A'><div class='listcontent'><img src=" + src + "><label class='pname'>" + PersonName + "</label></div><div class='selectme'><Label>Delete</Label></div></li>"; 

Answer 2

この問題を解決する簡単な方法（最も効率的ではないが）あなたが追加するたびに関数に2番目のコードブロックを置くと、その関数を呼び出すことです新しい人物を右のリストに追加する。このようにして、すべてのhtml属性が定義され、2番目のブロックが呼び出される前のページに定義されます。あなたはダイナミックなリストのためにそれがうんざりしているのですが、JavaScriptがすべて実行されたときにページの読み込みにはないものを検索しようとしています。