从控制器（Laravel）返回结果，但不受 jquery 代码的影响答案

【问题标题】：Returning results from controller (Laravel) but doesn't affected by jquery codes从控制器（Laravel）返回结果，但不受 jquery 代码的影响
【发布时间】：2021-09-14 21:54:08
【问题描述】：

我使用 ajax 进行了实时搜索，并为我的卡片组件进行了其他 jquery 自定义（Tilt.js 等）。我成功获得了搜索结果，但它没有完整的 js 自定义。

阿贾克斯

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

从控制器返回的组件

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

【问题讨论】：

可以添加ajax调用的代码吗？由于您的 DOM 在第一次加载时不在页面上，因此不会调用自动 jQuery 初始化
对于倾斜，如$('.selector').tilt();
那么你要问的是，为什么页面加载后返回的 dom 元素上没有运行 js？
@MichaelMano 没错！所有卡片组件在开始时都有 jquery 影响，但是当我通过更改选择值进行过滤时，我得到卡片但没有效果。

标签： javascript jquery laravel

【解决方案1】：

这是由于 javascript 仅在文档加载完成后才加载，然后它会扫描所有 dom 元素中的元素并添加侦听器，如果在此之后加载 dom 元素，它们将不会有事件听众。要解决这个问题，有几种方法，但最简单的方法之一是

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

另一种方法是将onclick添加到<button onClick="yourGlobalFunction">中正在加载的元素中

【讨论】：