CODEWITHSUNDEEP
jqueryajax
Plummer
Plummer

Reputation: 6698

jquery .hover not working on AJAX rendered elements

I have some elements that are created from an AJAX call. Within those elements, there is a child element that when hovered needs to show another child element that was dynamically created. When I run the .hover jquery in a fiddle, it works fine. When I implement it in my code, it doesn't want to work.

I was wondering if it depends on when the .hover script is loaded vs when the elements are loaded from AJAX. Does one need to go before the other? Should a .promise be enacted to wait for the AJAX elements to load before the .hover script is run?

Here is a fiddle of my example.

Upvotes: 5

Views: 10997

Answers (7)

john Smith
john Smith

Reputation: 17936

You should try to insert the script inside the ajax response. like 

 <script> </script>

or you serve the script when the ajax call is complete or success

jQuery.ajax({

success:function(){jQuery('selector').yourfunction();},

        });

if you dont, the script will run and not find the selectors in the dom and the script wont run again

Upvotes: 2

Derek
Derek

Reputation: 4751

Check out deferred events using the .on() function. You can do an event like:

$('#parent').on('hover', '.touch', function() {
    $(this).next('.show').fadeIn(800);
},
function(){
    $(this).next('.show').delay(800).fadeOut(800);
});

OR, the pure CSS solution would be:

.touch + .show {
    display:none;
}
.touch:hover + .show {
    display:block;
}

Upvotes: 1

bashleigh
bashleigh

Reputation: 9324

This may not be the correct answer but I've found elements that are created within a function. Need their selector to be declared within the function. Like so:

function createEle(){
    $('#element').after('<div id="newEle"><div id="inner" style="display:none;"></div></div>');
    $('#newEle').hover(function(){
        $('#inner','#newEle').show();
    },function(){
        $('#inner','#newEle').hide();
    });
}

Upvotes: 0

Stuart Burrows
Stuart Burrows

Reputation: 10814

I understand your question to mean that you are attaching an event to an element that may not exist yet. Instead of binding to the element (which .hover() is shorthand for) you should delegate it to a permanent container element. You can do this with either delegate() or .on() depending on jQuery version.

Here's what it would look like in your fiddle: http://jsfiddle.net/7dcuh/15/

Upvotes: 6

Ram
Ram

Reputation: 144739

For dynamically generated elements, events should be delegated from one of static parents of the element or document object, you can use on or delegate method.

$(document).on({
    mouseenter: function() {
        $(this).next('.show').fadeIn(800);
    },
    mouseleave: function() {
        $(this).next('.show').delay(800).fadeOut(800);
    }
}, '.touch');

Upvotes: 10

Klevis Miho
Klevis Miho

Reputation: 859

If the content is generated with Ajax, you should use livequery

Upvotes: 0

Ivan Marjanovic
Ivan Marjanovic

Reputation: 1049

You need to execute .hover script in success callback of AJAX after you insert elements.

Upvotes: 0

Related Questions