Jquery nicescroll not working for tab in rails

Question

I have created multiple staffs and all staffs details show on index page using multiple tab in rails.staff list bellow 1)assistant directors,2)teachers,3)assistant teachers,4)bookkeepers,5)floaters and each staffs are show 100 record. I'm using jquery nicescroll plugin for my project but jquery nicescroll not working on tab.All pages working good normally.How can solve it?

Here my index.html.erb

<div id="content-header">
<h1>All Staff</h1>
</div>
<div id="breadcrumb">
<a href="/day_cares/dashboard" title="Go to Home" class="tip-bottom"><i  class="glyphicon glyphicon-home"></i> Home</a>
<a href="/staff" class="current">All Staff</a>
</div>
<div class="container-fluid" id="report">
<div class="row">
<div class="col-12 col-lg-12">
<div class="widget-box">
<div class="widget-title">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#assistant_directors">Assistant Directors</a></li>
<li><a data-toggle="tab" href="#teachers">Teachers</a></li>
<li><a data-toggle="tab" href="#assistant_teachers">Assistant Teachers</a></li>
<li><a data-toggle="tab" href="#bookkeepers">Bookkeepers</a></li>
<li><a data-toggle="tab" href="#floaters">Floaters</a></li>
</ul>
</div>

<div class="widget-content tab-content">
<div class="tab-pane active" id="assistant_directors">
<div class="row">
<%= render 'staff_list', :staff => @assistant_directors %>
</div><!-- /row -->
</div>

<div class="tab-pane" id="teachers">
<div class="row">
<%= render 'staff_list', :staff => @teachers %>
</div><!-- /row -->
</div>

<div class="tab-pane" id="assistant_teachers">
<div class="row">
<%= render 'staff_list', :staff => @assistant_teachers %>
</div><!-- /row -->
</div>

<div class="tab-pane" id="bookkeepers">
<div class="row">
<%= render 'staff_list', :staff => @bookkeepers %>
</div><!-- /row -->
</div>

<div class="tab-pane" id="floaters">
<div class="row">
<%= render 'staff_list', :staff => @floaters %>
</div><!-- /row -->
</div>
</div>
</div><!-- /widget-box -->
</div><!-- /col-12 -->
</div><!-- /row -->
</div><!-- /container-fluid -->

Here my render page staff_list.html.erb

<div class="widget-content">
<table class="table table-bordered table-striped table-hover data-table">
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>E-Mail</th>
<th>Hire Date</th>
<th>Credit Hours</th>
<th>In-service Hours</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<% staff.each do |staff| %>
<tr>
<td><%= staff.name.truncate(25) if staff.name %></td>
<td><%= staff.birth_day.strftime('%m/%d/%Y') if staff.birth_day %></td>
<td><%= staff.user.email %></td>
<td><%= staff.hire_date.strftime('%m/%d/%Y') if staff.hire_date %></td>
<td><%= staff.credit_hours %></td>
<td><%= staff.in_service_hours %></td>
<td>
<% if staff.user.has_role? :assistant_director %>
<div class="button_staff_index">
<%= link_to 'Edit', edit_assistant_director_path(staff),:class=>"btn btn-primary" %>
<%= link_to 'View', staff,:class=>"btn btn-success"  %>
<%= link_to 'Delete', staff, method: :delete, data: { confirm: 'Are you sure?' }, :class=>"btn btn-danger"  %></td>
</div>
<% elsif staff.user.has_role? :teacher %>
<div class="button_teacher_index">
<%= link_to 'Edit', edit_teacher_path(staff),:class=>"btn btn-primary" %>
<%= link_to 'View', staff, :class=>"btn btn-success" %>
<%= link_to 'Delete', staff, method: :delete, data: { confirm: 'Are you sure?' }, :class=>"btn btn-danger"  %></td>
</div>
<% elsif staff.user.has_role? :assistant_teacher %>
<div class="button_assistant_teacher_index">
<%= link_to 'Edit', edit_assistant_teacher_path(staff),:class=>"btn btn-primary" %>
<%= link_to 'View', staff,:class=>"btn btn-success" %>
<%= link_to 'Delete', staff, method: :delete, data: { confirm: 'Are you sure?' },:class=>"btn btn-danger" %></td>
</div>
<% elsif staff.user.has_role? :bookkeeper %>
<div class="button_bookkeeper_index">
<%= link_to 'Edit', edit_bookkeeper_path(staff),:class=>"btn btn-primary" %>
<%= link_to 'View', staff,:class=>"btn btn-success" %>
<%= link_to 'Delete', staff, method: :delete, data: { confirm: 'Are you sure?' },:class=>"btn btn-danger" %></td>
</div>
<% elsif staff.user.has_role? :floater %>
<div class="button_floater_index">
<%= link_to 'Edit', edit_floater_path(staff),:class=>"btn btn-primary" %>
<%= link_to 'View', staff,:class=>"btn btn-success" %>
<%= link_to 'Delete', staff, method: :delete, data: { confirm: 'Are you sure?' },:class=>"btn btn-danger" %></td>
</div>
<% end %>
</tr>
<% end %>
</tbody>
</table>
</div><!-- /widget-content nopadding -->

Thanks for your help!

Answer 1

try removing and binding it again when you switch tabs

 $("#MYDIV").getNiceScroll().remove();
        $('#MYDIV').niceScroll({
            background: "#bbb",
            cursorborder: "0",
            cursorwidth: "4px",
            horizrailenabled: false
        });

assumming that you put this function on a click handler