jquery - Unresponsive button in Laravel 5 yajra datatable -

i'm displaying table of usertypes. last column action column button opens modal edit usertype.

for reason button nothing.

controller :

public function usertype_getall(){     $usertype = usertype::select(['id','name','price','tv','created_at','updated_at']);     return datatables::of($usertype)         ->addcolumn('action',function($usertype){             return '<button class="btn btn-sm yellow edit" onclick="edit_usertype('.$usertype->id .')"><i class="fa fa-cog"></i></button>';         })         ->setrowid('id')         ->editcolumn('tv',function($usertype){             if($usertype->tv == 1){                 return 'ja';             }else{                 return 'nee';             }         })         ->editcolumn('price','eur {{$price}}')         ->removecolumn('id')         ->make(true); } 

i added in 2 ways know. via class/id , function none works. expected function work though

@extends('app') @section('content') <div class="row"><div class='col-md-12'>         <div class='portlet light bordered'>             <div class='portlet-title'>                 <div class='caption font-red-sunglo'>                     ledentypes                 </div>                 <div class="actions">                     <a id='create' href="#"  class="btn btn-circle btn-default">                         <i class="fa fa-fax"></i> nieuw lid </a>                 </div>             </div>             <div class='portlet-body'>                 <table id='type_table' class='table table-hover table-striped table-bordered'>                     <thead>                     <tr>                         <th>naam</th>                         <th>prijs</th>                         <th>tv</th>                         <th>created at</th>                         <th>updated at</th>                         <th>actions</th>                     </tr>                     </thead>                     <tbody id='speeltypes_tbody'>                      </tbody>                 </table>             </div>         </div>     </div> </div> @stop @push('scripts') <script type="text/javascript"> $(document).ready(function(){     $(function(){         edit_usertype(5);         function edit_usertype(id){             alert("dsfds");         }         $(".edit").on('click',function(){             alert('dsmfksdmfl');         })     })     $(function() {         $('#type_table').datatable({             processing: true,             serverside: true,             ajax: '{{ url('c_usertype_getall') }}',             columns: [                 {data: 'name', name: 'usertypes.name'},                 {data: 'price', name: 'usertypes.price'},                 {data: 'tv', name: 'usertypes.tv'},                 {data: 'created_at', name: 'usertypes.created_at'},                 {data: 'updated_at', name: 'usertypes.updated_at'},                 {data: 'action', name: 'action', orderable: false, searchable: false}             ]         });     });     $("#create").on('click',function(){                 $.ajax({                     url :'./c_usertype_new',                     type :'get',                     success : function(res){                         $("#modal").html(res);                         $("#modal").modal('show');                     }                 })             }     ) }) </script> @endpush 

actually jquery works datatable/create part. simple alert not fire. when press button error function edit_usertype not defined. thoughts?

this because delete button cannot binding before datatables being constructed.

here solution, need wait after datatables dom events

https://datatables.net/reference/event/

$('#mytable').on('draw.dt', function () {     alert('table redrawn');     // button binding work.. });