jQuery click and tilt.js doesn't work after ajax call

Question

I have jquery click functions and tilt.js attributes ..

I get output card component from controller successfully by ajax but when i click or hover it does nothing .

I also tried $('.item').on('click'(function(){ and it destroys whole jquery ..

How can i fix this ?

---

jQuery Codes ------------------------------------------------------------------------------------

$(document).ready(function() {

    $('.item').click(function(){
    
        $('.details').toggleClass('details-view');
        var image = $(this).children().children().children('.resim').attr('src');
        var name = $(this).children().children().children().children('h4').text();
        var title = $(this).children().children().children().children('h5').text();
        var description = $(this).children().children().children().children('p').text();
        var sector = $(this).children().children().children().children().children().children('.sector').text();
        var location = $(this).children().children().children().children().children().children('.location').text();


        $('.isim').text(name);
        $('.resimm').attr('src', image);
        $('.title').text(title);
        $('.description').text(description);
        $('.sectorr').text(sector);
        $('.locationn').text(location);


    });

    $('.closee').click(function(){
        $('.details').removeClass('details-view')
    });
    
    $("#role_id").prop('checked', false , function(){
        $(this).val('1')
    });


    $('#location , #sector').on('change',function(){
         var location = $('#location').val();
         var sector = $('#sector').val();
         
        $.ajax({
            url:'search',
            type:'GET',
            data:{
                'location':location,
                'sector':sector,
            },
            success:function(data){
                $('#content').html(data);
            }
        })
    }) });

---

Card component --------------------------------------------------------------------------

<div class="card mb-4" id="card" data-tilt data-tilt-max="5" data-tilt-glare data-tilt-max-glare="0.2">
           <div class="card-body">
        
            
           <div class="card my-2 rounded shadow item" role="button" id="{{$post->id}}"    >
                <div class="row no-gutters">
                    <div class="col-sm-2 pt-3 pl-2">
                    <img src="{{$post->image}}" class="img-fluid resim" alt="...">
                    </div>
                    <div class="col-sm-10">
                    <div class="card-body">
                        <h4 style="font-weight: bolder;">{{ $post->company_name }}</h4>
                        <h5 class="card-title" style="font-weight: bold;">{{ $post->job_title }}</h5>
                        <p class="card-text">{{ $post->description }}.</p>
                        <div class="row">
                            <div class="col-sm"><div class="rounded-pill text-white text-center py-2 sector " style="background-color: #003777;"> {{$post->sector}}</div></div>
                            <div class="col-sm"><div class="rounded-pill text-white text-center py-2 location " style="background-color: #003777;"> {{$post->location}}</div></div>
                            <div class="col-sm"><div class="rounded-pill text-white text-center py-2  " style="background-color: #003777;"> Apply Now!</div></div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
           </div>
           
        </div>