Click here to Skip to main content
15,667,475 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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:

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.
Sergey Alexandrovich Kryukov 23-Oct-14 23:41pm    
JavasScript? Ajax? Where? I can see only PHP and some weird long string...
Member 11176062 27-Oct-14 0:21am    
This is the javascript code i am using to load the sliders returned by above aj.php code one by one. As you can see, i have to manually load two "price_updater_clothings" script everytime i want to update prices on the sliders returned by ajax, otherwise previously defined scripts won't work on it.Kindly help.

<div id="myDiv"></div>
<input type="button" >

var i=1;
function loadXMLDoc()
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp.readyState==4)
var scrpt = document.createElement('script');
var scrpt1 = document.createElement('script');
var y1=document.createElement("div");
var y2=xmlhttp.responseText;

1 solution

You can use jQuery .on[^] function to make the javascript react to newly added/loaded elements.

If this helps, please take time to accept the solution. Thank you.

$(document).ready(function() {
    $( "your-slider-container" ).on( "hover", "your-slider-selector", function() {
        // your function body

Ready is needed so that your container is loaded before function call. your-slider-container is common parent element to all your would be parent for all elements. your-slider-selector can be class, attribute, id or any other identifier which you could use CSS on...most commonly class in this case.
Share this answer
Member 11176062 27-Oct-14 0:22am    
But i am making use of wordpress shortcodes which makes use of many events by themselves which i am unaware of. Isn't there any way where i can just load all the page-loadtime-scripts automatically just after ajax call?
Sinisa Hajnal 28-Oct-14 6:20am    
Using other events or even same events does not affect on function unless they set preventDefault / can still make the application via on function.
Member 11176062 31-Oct-14 10:39am    
I am a newbie in javascript. Can you please describe in detail what all steps i need to follow?
Sinisa Hajnal 3-Nov-14 2:09am    
In your page add <script> tag, in it write ready function that will call on...see updated solution for an example.
Member 14071009 28-Nov-18 23:32pm    
I know this thread is old but last week I got the same issue with my ajax code & for that I search a lot then this thread help me to figure out the issue that "when we load a php script using ajax then document state is not ready or load state." we just need to set it to

$(document).change(function() {
    // your functions

thats all
Thanks (this thread is actually help me)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900