Javascript Jquery动画和元素绑定悖论

我试图在用户单击一个div时设置它的动画，这样当前的“main”div就会移出视野，而另一个div会移动到窗口中，这样用户就可以看到关于他们单击的内容的更多细节

我面临的问题是，我实现的将用户带回主div的按钮无法绑定到（.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”）。单击（函数（）{
$（“#latestappdates”）.hide（“slide”{方向：“left”，放松：“linear”}，1000）；
$（“#主容器”）。附加（“”）；
$（“#通知详细信息”）.hide（）；
$（“#通知详情”）。附加（“”）；
$（“#通知详情”）.show（“幻灯片”{方向：“右”，缓和：“线性”}，1000）；
$（“#关闭通知详细信息”）。单击（函数（）{
$（#latestUpdates”）.show（“幻灯片”{方向：“左”，缓和：“线性”}，1000）；
$（“#通知详细信息”）.hide（）；
});
});

当我在

#notification details

中单击close按钮时，什么也没有发生，当我在FireBug控制台中重新键入重新绑定到close按钮的代码时，它似乎起了作用，我感觉问题可能是jQuery在完成效果之前绑定到元素

提前感谢,，

---

RayQuang

使用live映射单击事件

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

---

问题的根源可能有两方面：

• 在浏览器解释DOM之前执行JS ins。为了确保它是正确的，您可以做两件事：用准备好的文档包装代码（

  $（function（）{/*yourcode*/}）

  ）。或者将代码放在html的末尾（就在结束正文标记之前）

• 第二个问题可能是代码执行后，JS将div添加到dom中。您可以使用

  $（“a.yourlink”）.live（“单击”，function（）{/*yourlfunction*/}）

  解决此问题。这将绑定对添加到具有此ID的DOM中的每个新元素的单击

• 如果这些都没有帮助。在click函数的顶部添加一个console.log（“某物”）或alert（“某物”），看看它是否会触发。如果没有，您知道单击事件没有绑定，如果它在您的单击函数中做了一些不起作用的事情。然后最好的方法是console.log（）在click函数中操作的每个元素都会返回一些内容