2012-03-14 58 views
0

我正在创建一个Facebook应用程序,我在一些jquery上挣扎。用最简单的话来说,我有一个列表中所有Facebook好友的图片和名字的左栏。当我点击它们时,脸部会移动到右侧列,然后用css显示隐藏脸部:左侧列中没有。所以jquery动态地在右栏添加一个列表。儿童对象与jQuery使用.live

另外,当我点击左栏上的一张脸时,在它移动到右栏之前出现一个弹出窗口,提示您选择了该人。

到目前为止所有的工作都很好(忍受着我)。当我在右栏上有一张脸时,我可以选择将它们从右栏中删除。当我点击它时,它将删除一张脸并弹出一个消息,说你已经删除了该人。除了弹出窗口无法在列表中找到人员名称以及它没有定义的事实之外,一切都有效。这是增加了人右栏(这个完美的作品)

$(".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函数或动态创建列表有关。正如你可以看到有没有事先

+2

建议使用.on而不是.live作为其折旧。 – 2012-03-14 17:47:23

+0

它*被弃用,但有一个宽限期,'.live()'被别名,以便开发人员有时间更新他们的代码。 – 2012-03-14 18:05:54

回答

0

代码

感谢太大的差别在此行中,你有拼写错误“类”作为标签“CSS”的第一个代码块。标签永远不会设置类属性。

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>"; 
+1

我不相信。我花了4个小时试图在昨天工作。我可能已经看过这些代码行数100,并没有发现。感谢那。额外的一双眼睛肯定会有帮助 – 2012-03-14 18:10:44

+0

无后顾之忧。 :-)你可能想看看其他人对'live'被弃用的看法,但... – Buggabill 2012-03-14 18:11:55

0

一个简单的方法来解决这个问题(不是最有效的)是把代码的第二块到一个函数并调用它每次添加一个新的人在右边的列表中。这样,所有的html属性都将被定义,并在第二个块被调用之前在页面上定义。由于动态列表的存在,你说得很糟糕,你正尝试在所有的JavaScript运行时查找页面加载时不存在的内容。