Question

我正在尝试在用户点击它时为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-details中的关闭按钮时没有任何反应，当我重新键入重新绑定到关闭按钮的代码进入FireBug控制台时，它似乎工作，我觉得问题可能是在完成效果之前使用jQuery绑定到元素。

提前致谢， RayQuang

Answer 1

使用live来映射点击事件

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

Answer 2

问题的根源可能是两件事：

您的JS ins在浏览器解释DOM之前执行。要确保它可以做两件事：用准备好的文档包装代码（$(function(){ /* your code*/ })）。或者将代码放在html的末尾（就在关闭正文标记之前）
第二个问题可能是你的代码执行后你的div被JS添加到了dom中。您可以使用$("a.yourlink").live("click", function(){ /* yourfunction */})解决此问题。这会对添加到具有此ID的DOM的每个新元素进行单击。
如果这些都没有帮助。在点击功能的基础上添加console.log（“something”）或alert（“something”），看看它是否触发。如果不是，你知道点击事件没有绑定，如果它在你的点击功能中做了什么不起作用。那么最好的办法就是使用console.log（）在click函数中操作的每一个元素，看它返回一些东西......

Jquery动画和元素绑定悖论

2 个答案: