Returning results from controller (Laravel) but doesn’t affected by jquery codes

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>
        ';
    }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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">


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x