执行 ajax load 后函数将无法工作

Question

我的 table 中有一个用户列表。首先运行它将使用来自我的控制器的数据加载。我在每一行都有一个删除按钮功能。然后在我的删除按钮中，在成功删除用户后我有一个 ajax 加载。现在我使用 ajax 加载数据。但问题是我最初拥有的相同功能不再起作用。不知道为什么。

这是我的代码：

从我的控制器初始加载用户

<table class="table table-bordered table-striped table-hover" id="user-group-list">
    <thead>
        <tr>
            <th></th>
            <th>Group Name</th>
            <th>Description</th>
            <th class="text-center">
                <a href="<?php echo $add_group; ?>" class="btn ink-reaction btn-raised btn-primary btn-sm"><span class="fa fa-plus"></span></a>
                <button class="btn ink-reaction btn-raised btn-danger btn-sm"><span class="fa fa-trash-o"></span></button>
            </th>
        </tr>
    </thead>
    <tbody>
        <?php if($user_groups) { ?>
            <?php foreach($user_groups as $g) { ?>
                <tr>
                    <td class="text-center">
                        <input type="checkbox" name="group_id[]" value="<?php echo $g['id']; ?>" />
                    </td>
                    <td>
                        <label><?php echo $g['name']; ?></label>
                    </td>
                    <td>
                        <label><?php echo $g['definition']; ?></label>
                    </td>
                    <td class="text-center">
                        <a class="btn btn-icon-toggle btn-primary edit_group" data-id="<?php echo $g['id']; ?>"><i class="fa fa-pencil"></i></a>
                        <?php if($g['id'] > 2) { ?>
                        <a class="btn btn-icon-toggle btn-danger remove_group" data-id="<?php echo $g['id']; ?>" data-name="<?php echo $g['name']; ?>"><i class="fa fa-trash-o"></i></a>
                        <?php } ?>
                    </td>
                </tr>
            <?php } ?>
        <?php } else { ?>
            <tr>
                <td colspan="4" class="text-center">
                    <p>There are no user group set</p>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

然后在我的JS中

$('.remove_group').on('click', function(e) {
    e.preventDefault();
    var group_id = $(this).data('id');
    var name = $(this).data('name');

    alert(group_id); //wont work anymore after ajax load

    bootbox.dialog({
        message: "Are you sure you want to remove the group <span class='text-danger'>" + name.toUpperCase() + "</span>",
        title: "Notification",
        buttons: {
            success: {
                label: "Yes, remove it",
                className: "btn-info",
                callback: function() {
                    $.ajax({
                        url: "<?php echo site_url('users/user/remove_user_group'); ?>",
                        data: {group_id: group_id},
                        dataType: 'json',
                        type: 'post',
                        beforeSend: function() {
                            console.log('Loading...');
                        }, 
                        success: function(d) {
                            loadUserGroup();
                            makeToast(d.status, d.toast_info);
                        }, 
                        error: function() {
                            alert('Error Found!');
                        }
                    });
                }
            },
            danger: {
                label: "Cancel",
                className: "btn-default",
                callback: function() {
                    $(this).modal('hide');
                }
            }
        }
    });
});

function loadUserGroup() {
    $.ajax({
        url: "<?php echo site_url('users/user/load_group_list'); ?>",
        dataType: 'json',
        beforeSend: function() {

            var loader =  "<tr>";
                loader += " <td colspan='4' class='text-center'><span class='fa fa-spinner fa-pulse fa-3x'></span></td>";
                loader += "</tr>";

            $('#user-group-list tbody').empty();
            $('#user-group-list tbody').html(loader);
        },
        success: function(data) {
            $('#user-group-list tbody').empty();
            var group_list = '';
            $.each(data.user_groups, function(k, v){
                group_list += "<tr>";
                group_list += " <td class='text-center'><input type='checkbox' /></td>";
                group_list += " <td><label>" + v.name + "</label></td>";
                group_list += " <td><label>" + v.definition + "</label></td>";
                group_list += " <td class='text-center'>";
                group_list += "     <a class='btn btn-icon-toggle btn-primary edit_group' data-id='" + v.id + "'><span class='fa fa-pencil'></span></a>";
                if(v.id > 2) {
                    group_list += "     <a class='btn btn-icon-toggle btn-danger remove_group' data-id='" + v.id + "' data-name='" + v.name + "'><span class='fa fa-trash-o'></span></a>";
                }
                group_list += " </td>";
                group_list += "</tr>";
                //console.log(v.id);
            });

            $('#user-group-list tbody').html(group_list);

        },
        error: function() {
            alert('Error Occured!');
        }
    });
}

我的ajax加载

public function load_group_list() {

        $json['user_groups'] = array();
        $groups = $this->aauth->get_all_groups();

        if(count($groups) > 0) {
            foreach($groups as $group) {

                $json['user_groups'][] = array(
                    'id'    =>  $group['id'],
                    'name'  =>  $group['name'],
                    'definition'    =>  $group['definition'],
                    'href'  =>  site_url('users/user/user_group_info?group_id=' . $group['id'])     
                );

            }
        }

         header('Access-Control-Allow-Origin: *');
        header("Content-Type: application/json");
        echo json_encode($json);

    }

Answer 1

希望下面的函数失败

$('.remove_group').on('click', function(e) {//your code}

将其更改为以下代码

$(document).on('click','.remove_group', function(e) {//your code}

发生这种情况是因为您动态加载 class 并且 DOM 无法再识别该元素

执行 ajax load 后函数将无法工作

function wont work after executing ajax load

php

jquery

ajax

codeigniter

codeigniter-3