Question

I’m trying to animate a div when the user clicks on it so that the current “main” div moves out of the field of view and another div moves into the window so that the user can see more details about the thing they clicked on.

The problem that I’m facing is that the button that I have implemented to take the user back to the main div cannot be bound to (.click). The code is shown below:

$(".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();
    });
});

when I click the close button in #notification-details nothing happens, and when I retype the code that re-binds to the close button into the FireBug console, it seems to work, I have a feeling the issue may be with jQuery binding to the element before it has completed the effect.

Thanks in advance,
RayQuang

Answer 1

use live to map click event

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