Question

我正在创建一个Facebook应用程序，我在一些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功能或动态创建列表有关。正如您所看到的，代码

没有太大区别

提前致谢

Answer 1

在第一个代码块的这一行中，您在标签中拼错了'class'作为'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>";

Answer 2

解决此问题（不是最有效）的简单方法是将第二个代码块放入函数中，并在每次向右侧列表中添加新人时调用该函数。这样，将在第二个块被调用之前定义所有html属性并在页面上。你是因为动态列表搞乱了，你正试图在你所有的javascript运行时查找页面加载时不存在的东西。

使用.live和jquery的子对象

2 个答案: