Ajax работает только один раз

Question

У меня есть JS:

jQuery('.unblock').click(function(){
        var num = jQuery('.page.active').text();
        var ban_id = jQuery('.unblock').attr('id');

        jQuery.post('http://127.0.0.1/auth_system_1/user_activity/delete_user_ban', { ban_id : ban_id, num : num }, function(data) {

                if (data.status == 'ok')
                {
                    //jQuery('.comment-box').remove();
                    jQuery('#ban_list').append(data.html);
                }
                else
                {
                    alert('error');
                }

        }, 'json');
    });  

Мой контроллер:

function delete_user_ban()
{
    $user_id = $this->session->userdata('user_id');

    $ban_id = $this->input->post('ban_id');

    $current_page = (int)$this->input->post('num');

    $current_page = ($current_page-1)*2;

    //$this->activity_model->delete_user_ban($ban_id);

    $per_page = 2;

    $data['ban_list'] = $this->user_activity_lib->user_ban_list($user_id, $current_page, $per_page);

    $data['test'] = rand(1,100);

    $html = $this->load->view('front_end/ajax_delete_ban', $data, true);

    unset($data);
    unset($user_id);
    unset($ban_id);

    echo json_encode(array(
                            'status' => 'ok',
                            'html' => $html,
                            'start_page' => $current_page));

}

$data['test'] = rand(1,100); is for test! I make random number and send it to view.

Моя проблема в том, что у меня на странице несколько блоков, когда я нажимаю кнопку "unban", удаляем запись в базе данныхи с помощью json я возвращаю загруженные строки (по 2 элемента на страницу), и когда я пытаюсь нажать ту же кнопку на блоке, который пришел из json, он не работает ?!Почему?

Мой ajax не вызывает второй, если я нажимаю на элементы, пришедшие из json?

Просмотр, исходящий из json, такой же, как и при загрузке страницы.

Answer 1

Ключ - метод jQuery on().

.on () - API jQuery

Почему? Элементы HTML, добавленные на веб-страницу после загрузки DOM, не будут "видеть" такие события, которые были объявлены, например, например. .click() или .hover() и т. Д.

jQuery('.unblock').on('click', function(){
    var num = jQuery('.page.active').text();
    var ban_id = jQuery('.unblock').attr('id');

    jQuery.post('http://127.0.0.1/auth_system_1/user_activity/delete_user_ban', { ban_id : ban_id, num : num }, function(data) {

            if (data.status == 'ok')
            {
                //jQuery('.comment-box').remove();
                jQuery('#ban_list').append(data.html);
            }
            else
            {
                alert('error');
            }

    }, 'json');
});

Примечание: Метод jQuery on() был представлен в jQuery 1.7. Если вы используете более старую версию jQuery, используйте метод live().

.live () - API jQuery