function wont work after executing ajax load - php

Question

I have a list of users in my table. At first run it will load using the data from my controller. And I have a remove button function in every row. And then in my remove button I have an ajax load AFTER the successful removal of the user. Now I load the data using ajax. But the problem is the same functionality I have at first wont work anymore. I don't know why.
Here's my code:
Initial load of user from my controller
<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">
<span class="fa fa-plus"></span>
<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>
Then in my 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!');
}
});
}
My ajax load
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

Hope the below function fails
$('.remove_group').on('click', function(e) {//your code}
Change that to the below code
$(document).on('click','.remove_group', function(e) {//your code}
It occur because you load the class dynamically and DOM can't identify the element any more