我的表中有一个用户列表。首次运行时,它将使用我的控制器中的数据加载。我在每一行都有一个删除按钮功能。然后在我的删除按钮中,成功删除用户后,我有一个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);
}
答案 0 :(得分:2)
希望以下功能失败
$('.remove_group').on('click', function(e) {//your code}
将其更改为以下代码
$(document).on('click','.remove_group', function(e) {//your code}
之所以发生这种情况,是因为您动态加载了类,DOM无法再识别该元素