CODEWITHSUNDEEP
phpjavascriptjquerylive
DJ_Plus
DJ_Plus

Reputation: 181

jQuery Not Working with a JS Search function

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.

Upvotes: 1

Views: 77

Answers (2)

Elliot Bonneville
Elliot Bonneville

Reputation: 53301

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(){ });

});

Upvotes: 1

Halcyon
Halcyon

Reputation: 57709

You're adding the mouseover/out event on document ready. The data you load doesn't get added to the DOM until much later. After you've done your AJAX request and the content is added to the DOM, attach the events.

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

Means: find all elements with the class request and add a mouseover function. The handler doesn't magically appear on elements you add afterwards.

Upvotes: 1

Related Questions