Функция не работает после выполнения загрузки ajax

Question

У меня есть список пользователей в моей таблице. При первом запуске он будет загружаться с использованием данных моего контроллера. И у меня есть функция кнопки удаления в каждой строке. И затем в моей кнопке удаления у меня есть ajax load ПОСЛЕ успешного удаления пользователя. Теперь я загружаю данные с помощью 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!'); 
     } 
    }); 
} 

Мой Аякса нагрузки

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} 

это происходит потому, что вы загрузить класс динамически и DOM не может идентифицировать элемент больше