Manually initialising cycle2 - slideCount of undefined

Question

I have a site that uses cycle2. The area that the slideshow is in also has the possibility to be loaded in via AJAX. When this happens, the slideshow stops.

As I have read in the documentation for cycle2, this occurs because of the page reload and I need to manually initialise instead of relying on the auto-initialisation of cycle2.

The doc describes it as such:

$( '.mySlideshows' ).cycle();
    "In this case you will need to programatically initialize your slideshow by invoking the cycle method as shown above."

So I have done this, and have put the invoke method in my AJAX request so that it fires on the load of the AJAX:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("ajaxParent").innerHTML=xmlhttp.responseText;
    $( '.cycle-slideshow' ).cycle();
    }

But I get this error:

Uncaught TypeError: Cannot read property 'slideCount' of undefined 

I'm not sure what it's not getting, afterall this should initialise the slideshow and it works BEFORE the AJAX is reloaded.

Here is the slideshow HTML

<div class="cycle-slideshow" 
        data-cycle-fx=fade
        data-cycle-timeout=2000
        data-cycle-prev="#prev-venues"
        data-cycle-next="#next-venues"
        data-cycle-caption="#alt-caption-venue"
        data-cycle-caption-template="{{alt}}"
        data-cycle-log="false"
        >
    <!-- the images -->
      <img src="images/data/venues/hocky.png" alt="Hockey Arena">
    <img src="images/data/venues/athletesvilage.png" alt="Athletes Village">
    <img src="images/data/venues/celticpark.png" alt="Celtic Park">
    <img src="images/data/venues/hampden.png" alt="Hampden">
    </div>