jQuery Not Working with a JS Search function

Question

So im working on a friend search function. The search function works great. When you search a name, each individual user pops up in separate div's with there picture and name and a box that says "request". Now what i want to do, is when you click the box itll run some jQuery to request the user, but it seems that jQuery isnt working inside my live loading JS div.

Heres my code:

$(document).ready(function(){
    $('.request').mouseover(function() {
        $(this).addClass('select');
    });
});

 $(document).ready(function(){ 
    $('.request').mouseout(function() {
        $(this).removeClass('select');
    });
}); 

$(document).ready(function(){   
    $('.request.select').click(function() {
        var name = $(this).attr('href');
        $.ajax({
            type: "POST",
            url: "requestfriend.php",
            data: {'name': name}
        });
        $(".request.select").load('checkmark.php', function(){ });

    });
});

And Here is the HTML of the user div.

            echo '
            <div class="update miniuser" style="margin: 3px; width: 395px;">
            <div><img src="http://myurl.com/' . $FRIENDS[$i] . '/user.png" /></div>
            <div style="margin-top: 10px;">' . $FRIENDS[$i] . '</div><div class="request" href="' . $FRIENDS[$i] . '">Request</div>
            </div></div>';

The add class isnt working. I believe its because its being loading live in the div? thats when i put the document ready functions on them. still no dice.

Answer 1

I'm guessing you want .live(), which adds the function to all elements with that selector, dynamically loaded or no.

$('.request.select').live("click", function() {
    var name = $(this).attr('href');
    $.ajax({
        type: "POST",
        url: "requestfriend.php",
        data: {'name': name}
    });
    $(".request.select").load('checkmark.php', function(){ });

});