jquery .hover not working on AJAX rendered elements
ajax, jquery
Solution
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/
Problem
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.