jquery - lose click() event after ajax call???

Question

At the following webpage liamharding.com/pgi.php I have an option panel on the left side of the page which opens and closes upon clicking the panels 'arrow', this works fine until you select a market (for testing use one of the 'Random Walk' markets and click 'Show/Refesh Graphs'), this then makes an ajax call using get_graph(forexName, myCount, divIsNew) function.

Once this call is completed a graph(s) is displayed and then my options panels click() event does not work?

The ajax call returns the data in a variable ajax_data, the problem happens when I perform the following code var jq_ajax_data = $("<div/>").html(ajax_data); . I need to wrap it in a so I can extract data from it using jQuery. If this line of code is commented out the click() event works fine ??

Hope somebody can help, I have spent a lot of time but cant find what the problem is.

Answer 1

You are replacing the contents of a div with new html. the new html will not have any click events assigned to it.

Use the .live command to always have your elements have click events assigned to them.

Answer 2

Its hard to tell exactly what is causing the click event to be lost without seeing the full code, but you can try setting the click as a live event like this:

$("#clickableItem").live("click", function() { 
    //do stuff
});