Returning results from controller (Laravel) but doesn't affected by jquery codes-CodePudding

I did live search by using ajax and have other jquery customizations (Tilt.js etc..) for my card component. I get search results successfully but it doesn't have whole js customizations .

Ajax

$(document).ready(function() { 

    $('#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);
            }
        })
    }) });

Component that returns from Controller

$output ='';

    foreach($data as $post){
        $output .='
        <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>
        ';
    }

CodePudding user response：

This is due to javascript only loads once the document has finished loading, It then scans all of your dom elements for the elements and adds the listeners, If you are loading dom elements in after this has happened they will not have the event listeners. To get around this there are a few ways but one of the easiest is

$(document).ready(function(){
    $('body').on('click','.js-card',function(){
        // This body click function will only trigger if the element has the class js-card.
    });
});

Another way is to add the onclick to the elements you are loading in <button onClick="yourGlobalFunction">