Javascript doesn't run after ajax call

Question

So I have a problem with my page that make my javascript does not run after using ajax search,

When I first load my page, my js runs normally (first code)
After I use search bar and my js does not run

First I have a page that shows and delete button like this pic

The javascript i want work after ajax result

$( document ).ready(function() {
    $('#delButton').click(function(event){
        $noInv=$('#noInv').text();
        $konfirm=confirm("Yakin ingin menghapus "+$noInv+" ?");
        if($konfirm ==false){
            event.preventDefault();
        }
})

Ajax Script that I use

$('#search').on('keyup',function(event){
    $value=$(this).val();
        $.ajax({
            type : 'get',
            url : "{{route('collection.action')}}",
            data:{'search':$value},
            success:function(data){
                $('tbody').html(data);
            }
        }); 
    })
});

Result from ajax if success

 <tr>
        <td>'.$nomor.'</td>
         <td id="noInv">'.$terimas->noinv.'</td>
         <td>'.$terimas->customer.'</td>
         <td>'.$terimas->alamat.'</td>
         <td>'.$terimas->top.'</td>
         <td>'.$terimas->tglinv.'</td>
         <td>'.$terimas->nopo.'</td>
         <td>'.$terimas->totinv.'</td>
         <td>'.$terimas->contact.'</td>
         <td>'.$terimas->status.'</td>
         <td>'.$terimas->no_tandaterima.'</td>
         <td><a id="delButton" class="btn btn-primary" href="collection/deleteInv/'.$terimas->ttID.'">Delete</a></td>
     </tr>

JS that i want after search ajax

Update

Already try using Event binding on dynamically created elements and doesn't work,
run my js with function, so I call my function on input button and boom my js run like before

Code on my ajax

 <tr>
            <td>'.$nomor.'</td>
             <td id="noInv">'.$terimas->noinv.'</td>
             <td>'.$terimas->customer.'</td>
             <td>'.$terimas->alamat.'</td>
             <td>'.$terimas->top.'</td>
             <td>'.$terimas->tglinv.'</td>
             <td>'.$terimas->nopo.'</td>
             <td>'.$terimas->totinv.'</td>
             <td>'.$terimas->contact.'</td>
             <td>'.$terimas->status.'</td>
             <td>'.$terimas->no_tandaterima.'</td>
             <td><form action="collection/deleteInv/'.$terimas->ttID.'">
    <input onclick="return confirmSubmit()" type="submit" value="Delete" />
</form></td>
            
         </tr>

Code on my page

<script type="text/javascript">
function confirmSubmit()
{
$agree=confirm("Are you sure you wish to continue?");
if ($agree)
 return true ;
else
 return false ;
}

</script>

Even so I still hoping how to run my js after ajax, not using function like this one

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mark Baijens, Dec 15 '20 at 10:43
Thank you for the answer but sadly didn't work after using search bar — mwhy25, Dec 15 '20 at 10:52
Note that you have an id selector for the button. Better use a class selector because id's need to be unique (assuming you have a delete button for each row). This together with event delegation should fix your issue. If not update your question with class selectors and event delegation that you did. — Mark Baijens, Dec 15 '20 at 10:58
still didn't work after search ajax, but my js still working if i didn't use search bar — mwhy25, Dec 15 '20 at 11:07

Javascript doesn't run after ajax call

0 Answers0