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 should NOT use .live as above have recommended, it is now deprecated. You should instead use .on e.g.

$(document).on('click', '.selector', function(){
    //Your code here
});

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
});