Question

I have 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');
    });  

My controller :

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.

My problem is that I have on page some blocks , when I press button “unban” record delete in database and with json I return loaded lines (2 item per page) and when I try to click the same button on block which came from json it do not work ?! Why ?

My ajax do not call second if I press on items which came from json?

View which came from json is the same which I load on page load.

Answer 1

The key is jQuery’s on() method.

.on() – jQuery API

Why? HTML elements added to a webpage after the DOM was loaded will not “see” such events that was declared by e.g. .click(), or .hover(), and so on.

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');
});

Note: jQuery’s on() method was introduced in jQuery 1.7. If you use an older version of jQuery use the live() method instead.

.live() – jQuery API