Перезагрузите Ajax / Javascripts после загрузки данных .html ()

Question

Итак, у меня есть страница, которая загружает данные на страницу с помощью следующей функции ajax.

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

// Загруженное сообщение

$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>';

Загруженное сообщение содержит несколько ссылок, которые должны работать с другой функцией Ajax (приведенной ниже), которая, очевидно, не работает. Вторая функция (ниже) загружается перед загрузкой данных на страницу. Я подозреваю, что, возможно, поскольку эта функция загружается задолго до загрузки данных, вторая функция не распознает щелчок по элементу voice_up. Есть ли способ это исправить ??? Я не слишком знаком с AJAX, я был бы очень признателен за помощь .. Спасибо

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

// *** НОВАЯ ФУНКЦИЯ

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

Когда вы вызываете эту вторую функцию, она захватывает только все элементы a.vote_up, которые существуют на странице . Когда вы добавите больше ссылок на страницу позже, они не будут прислушиваться к щелчку.

Вы можете сделать одну из двух вещей, чтобы исправить это:

1. Добавьте прослушиватель кликов для каждой новой ссылки, когда вы добавляете ее в DOM. Но это немного трудоемко, потому что вам придется изменить способ, которым ваша функция AJAX создает ссылки, и вам придется превратить эту функцию назначения прослушивателей кликов в нечто автономное, что вы можете использовать в любое время.

2. Вместо использования метода click используйте вместо него метод delegate:

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

Подробнее о делегировании событий с помощью jQuery.

Answer 2

вы должны привязать событие клика после загрузки 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
                                         });
                                });
                            }
                        });

Answer 3

Вы можете использовать функцию live для привязки события к динамически создаваемым элементам, например:

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

    });

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

Это будет эффективно привязывать это событие щелчка ко всем элементамкоторые соответствуют селектору a.vote_up, сейчас и в будущем.