jquery와 함께 .live를 사용하는 하위 개체

Question

일부 jquery에 어려움을 겪고있는 facebook 앱을 만들고 있습니다. 가장 간단한 용어로 나는 그림과 모든 페이스 북 친구들의 이름이 목록에있는 왼쪽 열을 가지고있다. 내가 그들을 클릭하면 얼굴이 오른쪽 열로 이동하고 왼쪽 열에 css display : none으로 얼굴을 숨 깁니다. 따라서 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

쉬운 방법은 (가장 효율적인을하지 않음)이 문제를 해결하려면 함수에 코드의 두 번째 블록을 넣어 당신이를 추가하는 기능을 매번 호출하는 것입니다 새로운 사람을 오른쪽 목록에 추가하십시오. 이렇게하면 모든 HTML 속성이 정의되고 두 번째 블록이 호출되기 전에 페이지에 나타납니다. 동적 목록 때문에 어지럽 혀진다고해서 모든 자바 스크립트가 실행될 때 페이지로드에없는 것을 찾아 내려고합니다.