Laravel中Ajax返回搜索结果未生效jQuery（含Tilt.js）自定义效果问题

问题原因 #

Tilt.js 等自定义效果只会在页面初始加载时对当时已存在的 DOM 元素完成初始化绑定，你通过 Ajax 动态插入的新卡片不在初始扫描范围内，因此不会自动应用已配置的效果。

解决方案 #

1. 封装自定义效果初始化逻辑

把 Tilt 初始化和其他需要应用在卡片上的自定义 JS 逻辑封装为公共函数，页面首次加载、Ajax 更新 DOM 后各执行一次即可。修改后的 Ajax 代码如下：

// 封装所有卡片自定义效果的初始化函数
function initCardEffects() {
  // 初始化Tilt效果，先销毁已有实例避免重复绑定异常
  $('.card[data-tilt]').tilt('destroy').tilt({
    max: 5,
    glare: true,
    maxGlare: 0.2
  });
  // 其他需要绑定到卡片的自定义效果也可以放在这里
}

$(document).ready(function() {
  // 页面首次加载时执行一次初始化
  initCardEffects();

  $('#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);
        // 新DOM插入后重新执行初始化
        initCardEffects();
      }
    })
  })
});

2. 优化交互事件绑定逻辑

如果你的卡片还有点击、hover 等自定义交互事件，需要改为事件委托的形式绑定，确保动态插入的卡片也能触发对应逻辑，示例如下：

// 错误写法：仅对初始加载的卡片生效
$('.item').on('click', function() {
  // 点击卡片的业务逻辑
})

// 正确写法：委托到页面固定存在的父容器（也可以用#content）
$(document).on('click', '.item', function() {
  const postId = $(this).attr('id');
  // 点击卡片的业务逻辑
})

优化建议

你在 Controller 中返回的卡片代码存在重复的 id="card" 属性，DOM 规范要求 id 必须全局唯一，建议删除该重复 id 或者用 $post->id 拼接生成唯一值，避免后续 DOM 选择异常。

内容的提问来源于stack exchange，提问作者fatihcan8