jQuery not working on loaded content

Problem

I am working on a site where the content loads itself (through an Ajax call) into a div box that appears in the center of the screen when the user clicks an option on the menu. The issue I am having is that I can't figure out why none of the javascript/jquery code seems to work on any of the loaded content. I need to re-declare all of the javascript and jquery files in the loaded content itself for it to run.

Essentially, the user clicks "User List" from the menu:

    $('#users_list').live("click", function(event) {
    event.preventDefault();
    $('.prompt_content').load('users.php?page=1', function() {
        showprompt();
    });
    });

Then the div box appears at the center of the screen with all of the users names and a little avatar. I'm trying to change the background color of the user information boxes when the user hovers their cursor over them.

$('.user_info').hover(function() {
    $(this).prev('td').css("background-color", "#F0F0F0");
    $(this).css("background-color", "#F0F0F0");
}, 
function() {
    $(this).prev('td').css("background-color", "white");
    $(this).css("background-color", "white");
});

$('.user_avatar').hover(function() {
    $(this).next('td').css("background-color", "#F0F0F0");
    $(this).css("background-color", "#F0F0F0");
}, 
function() {
    $(this).next('td').css("background-color", "white");
    $(this).css("background-color", "white");
});

This only appears to work if I redeclare my jquery links at the top of the page whose content I'm loading...

Here's the markup (excuse the inline css, it's just there for debugging):

<table>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_10">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_10">Dave Gilbert
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_15">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_15">Norman De luca
        </td>
    </tr>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_24">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_24">Test user 1
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_17">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_17">Test user 2
        </td>
    </tr>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_21">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_21">Test user 3<br />
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_18">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_18">Test user 4
        </td>
    </tr>
    <tr>
        <td style="padding: 10px;" class="user_avatar" id="user_22">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_22">Test user 5
        </td>
        <td style="padding: 10px;" class="user_avatar" id="user_16">
            <img src="images/noavatar.jpg">
        </td>
        <td style="padding: 10px; word-wrap: break-word;" class="user_info" id="user_16">Leonard Klein
        </td>
    </tr>
</table>
Problem courtesy of: tom c

Solution

The problem is that you are attaching the events before the dynamic elements are added, so they are un-effected. To fix this, you would have to do something like this:

// attach to the closest parent element that is on the loaded page (not ajax)
$("body").on({ 
    mouseenter: function () {
        $(this).prev('td').css("background-color", "#F0F0F0");
        $(this).css("background-color", "#F0F0F0");
    },
    mouseleave: function () {
        $(this).prev('td').css("background-color", "white");
        $(this).css("background-color", "white");
    }
}, '.user_info'); // <- selector here
Solution courtesy of: Supericy

Discussion

Its because it not available in the dom and you are directly accessing the .hover() on the dynamic content for this you have to use .on() handler:

$(document).on('hover', '.user_info', function() {
   $(this).prev('td').css("background-color", "#F0F0F0");
   $(this).css("background-color", "#F0F0F0");
},function() {
   $(this).prev('td').css("background-color", "white");
   $(this).css("background-color", "white");
});

Instead using $(document) you can use the closest parent existing div or any element like:

$('.prompt_content').on('hover', '.user_info', function() {
   $(this).prev('td').css("background-color", "#F0F0F0");
   $(this).css("background-color", "#F0F0F0");
},function() {
   $(this).prev('td').css("background-color", "white");
   $(this).css("background-color", "white");
});
Discussion courtesy of: Jai

This recipe can be found in it's original form on Stack Over Flow.