Question

So I have a page that loads the data into the page through the following ajax function.

$(document).ready(function(){             
                function loadData(page){                  
                    $.ajax
                    ({
                        type: "POST",
                        url: "inc/load_data.php",
                        data: "p="+page+"XXXXXXXXXXX",
                        success: function(msg)
                        {
                            //alert(msg);
                            $("#container").ajaxComplete(function(event, request, settings)
                            { 
                                $("#container").html(msg);
                                //**MODIFIED CODE
                                $(document).delegate('a.vote_up','click', f_vote_up);   
                            });
                        }
                    });
                }
  });

//Loaded Message

$msg.='<span class="vote_buttons" id="vote_buttons'.$row['id'].'">
       <a href="javascript:;" class="vote_up" id="'.$row['id'].'"></a>
       <a href="javascript:;" class="vote_down" id="'.$row['id'].'"></a>
    </span>';

The message that is loaded has some links that need to work with a another Ajax function(given below), which is apparently not working. The second function(below) is loaded before the data is loaded into the page. I suspect, may be since this function is loaded way before the data is loaded, the second function is not recognizing the click on vote_up. Is there any way to fix it??? I’m not too familiar with AJAX, I would really appreciate some help.. Thank you

$(function(){
    $("a.vote_up").click(function(){
    //get the id
    alert("Hi");
        //REST OF THE CODE
}

//***NEW FUNCTION

function f_vote_up(){
    //get the id
    the_id = $(this).attr('id');

    //REST OF THE CODE
    $("span#vote_buttons"+the_id).html("Hello, Testing Response!");
    alert("End of Func!"); // <
}

Answer 1

When you call that second function, it’s only grabbing all the a.vote_up elements that currently exist on the page. When you add more links to the page later on, they don’t know to listen for the click.

You can do one of two things to fix this:

1. Add the click listener to each new link when you add it to the DOM. But this is a bit of work, because you’d have to change how your AJAX function builds the links, and you’d have to turn that click-listener-assigning function into something standalone that you could use at any time.

2. Instead of doing using the click method, use the delegate method instead:

   $(document).delegate('a.vote_up', 'click', function () { ... });
   

More info on event delegation with jQuery.