When i click a region.. ajax updates the container div with a new svg map. All looks good.

My current task is to update a secondary div with the name of the current hovered svg path (region) of the current map.

This works completely fine until i click a region and ajax updates the map to a new map. 

The secondary div stops updating and stays frozen on the last piece of hovered data. E.g. the jqery code that handles this task stops working, but the rest (ajax) works fine.

This is likely a simple problem and purely down to my lack of knowledge . I've made the following video to give some context. 

https://www.youtube.com/watch?v=-7Zyo6CKMoU

here is the code  (only important bits)

1. $(function() { 
2.       $( ".region" ).mouseover(function() {
3.             var regionLocation = 'location text';
4.             $("#location .path").html("location text");
5.       })
6.       .mouseout(function() {
7.             $("#location .path").html('location text');
8.        });
9. });

I assume that this code needs to check to see if an svg instance exists every time it fires, rather than only interpreting the first instance that is loaded with the page.

Any ideas on how to do this? Thanks