I am loading shortcodes using ajax in my webpage. I am able to load shortcodes ( which essentially consists of a slider wherein when we hover over a slider, a different image comes) but the "on-hover" functionality is not working on the new sliders loaded. When i move my mouse over the new slider, new image doesn't come up. I found out after some research that this is due to JavaScript not loading after ajax call. I read somewhere that I will have to re-listen to the on-mouse-hover events again after ajax call. Is there some way I can make on mouse hover work on new sliders?
This is my php code that returns new sliders:
<?php
require_once( 'wp-load.php' );
echo do_shortcode('[column_third][virtual_slide_box id="842"][/column_third][column_third][virtual_slide_box id="843"][/column_third][column_third_last][virtual_slide_box id="844"][/column_third_last][column_third][virtual_slide_box id="845"][/column_third][column_third][virtual_slide_box id="846"][/column_third][column_third_last][virtual_slide_box id="847"][/column_third_last]');
?>
I am using xmlhttprequest in order to create an ajax request and then creating a element to include the ajax response and appending it as a child in original html document.
Is there any why it can be done? Or is there any way I can run all the scripts loaded at time of initial page-load onto all the new elements loaded after ajax call? Please keep it simple, because I am new to this technology.