javascript - jquery动画和元素绑定(bind)悖论

Question

我正在尝试在用户单击时为一个 div 设置动画，以便当前“主”div 移出视野，另一个 div 移入窗口，以便用户可以看到有关该事物的更多详细信息他们点击了。

我面临的问题是，我实现的用于将用户带回主 div 的按钮无法绑定(bind)到 (.click)。代码如下所示:

$(".notification").click(function() {
    $("#latestUpdates").hide("slide", { direction: "left", easing: "linear" }, 1000);

    $("#mainContainer").append('<div id="notification-details"></div>');
    $("#notification-details").hide();
    $("#notification-details").append('<a href="#" id="close-notification-details">Close</a>');
    $("#notification-details").show("slide", { direction: "right", easing: "linear" }, 1000);

    $("#close-notification-details").click(function() {
        $("#latestUpdates").show("slide", { direction: "left", easing: "linear" }, 1000);
        $("#notification-details").hide();
    });
});

当我点击 #notification-details 中的关闭按钮时，没有任何反应，当我将重新绑定(bind)到关闭按钮的代码重新输入到 FireBug 控制台时，它似乎可以工作，我有感觉问题可能出在元素完成效果之前 jQuery 绑定(bind)到元素上。

提前致谢，雷光

Answer 1

使用live映射点击事件

 $("#close-notification-details").live('click',function() {
        $("#latestUpdates").show("slide", { direction: "left", easing: "linear" }, 1000);
        $("#notification-details").hide();
    });