Выполнить действие jquery для HTML, который возвращается другим действием?

Question

У меня есть фрагмент кода, который загружает комментарии внутри div, когда страница загружается.

$.get("ajax_getcomments.php", { itemid: <? echo $id; ?>, type: 1 },
    function(data){
        $('#comments').html(data.comment_data);
    }, "json");

Внутри этих результатов вот ссылка, прикрепленная к каждому комментарию

<a href="/ajax_action.php?deletecomment=ID" class="delete_comment"></a>

Когда эта ссылка нажата, весь комментарий div должен исчезнуть из поля зрения.Я использую следующий код:

$('.delete_comment').click(function() {
        var comment_id = $(this).parent().parent().attr('id');
        var objPDiv = $(this).parent().parent();
        $.get('./ajax_action.php', {id:comment_id, action: 'delete_comment', ajax: 1}, function(data) {
            objPDiv.animate({ opacity: 'hide' }, "slow");
        });
        return false;
    }); 

Проблема в том, что ... он не работает на HTML, который выбирается из ajax_getcomments.php jquery.

, если я копирую /вставьте HTML в и не выполняйте начальный вызов GET, он работает отлично.

Answer 1

Проблема в том, что .click() работает только для существующих элементов, соответствующих вашему селектору. Для привязки к будущим элементам необходимо использовать .live():

$('.delete_comment').live('click', function() {
        var comment_id = $(this).parent().parent().attr('id');
        var objPDiv = $(this).parent().parent();
        $.get('./ajax_action.php', {id:comment_id, action: 'delete_comment', ajax: 1}, function(data) {
            objPDiv.animate({ opacity: 'hide' }, "slow");
        });
        return false;
}); 

.live() присоединяет обработчик к событию для всех текущих и будущих элементов, которые соответствуют вашему селектору. Поэтому, когда jQuery увидит, что вы вставили в DOM новый элемент, соответствующий селектору, используемому в .live(), он автоматически присоединит обработчик для события onClick к новому элементу.

Answer 2

Событие (в данном случае click) прикрепляется ко всем элементам .delete_comment во время первоначального выполнения javascript (обычно при загрузке страницы). Если вы создадите новые элементы позже, событие click не будет прикреплено к ним, если вы специально не скажете jQuery присоединить его.

Вы можете сделать это с помощью функции live:

$('.delete_comment').live('click', function() {
    // Your code
});

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

Answer 3

Необходимо следить за действиями по удалению на уровне div контейнера, используя .delegate().

$('#comments').delegate('.delete_comment','click', function(e) {
    e.preventDefault(); 
    // your deletion code here
});