Reload Ajax/Javascripts afer .html() data load

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 functi开发者_Go百科on 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!"); // <
}

---

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.

---

you should bind your click event after you load the html

   $.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);
                                       $("a.vote_up").click(function(){
                                      //get the id
                                       alert("Hi");
                                       //REST OF THE CODE
                                         });
                                });
                            }
                        });

---

You can use the live function to bind an event to dynamically created elements, i.e.:

$("a.vote_up").live('click', function(){
        //get the id
        alert("Hi");

    });

http://api.jquery.com/live/

This will effectively bind this click event to all elements which match the a.vote_up selector, now and in the future.