搜索文本修剪脚本后 livewire 不起作用“...查看更多”

【问题标题】：livewire after the search the text trimming script does not work "...see more"搜索文本修剪脚本后 livewire 不起作用“...查看更多”
【发布时间】：2025-12-17 03:30:01
【问题描述】：

after search

我正在使用脚本来修剪部分帖子和按钮“..查看更多”。在第一页加载时，一切正常，但是在搜索几乎所有帖子后，脚本都不起作用。有人可以帮我吗？

jQuery(function($) {
 $('.desc').shorten({
     chars: 300,
     ellipses: '...',
     more: 'see more',
     less: '...less'
  });
});

public function render(){
  return view('livewire.search-posts', [
    'posts' => JobPost::where('title', 'like', '%'.$this->search.'%')
            ->orderBy('published_at','desc')
            ->paginate($this->perPage),]);
}

<div class="post-container  pl-0 mr-2 desc" wire:ignore >
  {!! $post->text !!}
</div>

对不起我的英语

【问题讨论】：

请澄清这一行，但在搜索几乎所有帖子后，脚本不起作用
@STA 当我清除搜索栏以重置过滤器时，“...查看更多”按钮消失并且帖子没有被裁剪，请查看我附加的图像。

标签： javascript jquery laravel laravel-livewire

【解决方案1】：

如果我理解正确，这可能是因为你的 jquery 脚本没有加载到你的组件中，因为 livewire 在每次请求后都会刷新组件

有两种可能的解决方案

确保你的组件视图有一个根 div

  <div>
     <div class="post-container  pl-0 mr-2 desc" wire:ignore >
        {!! $post->text !!}
     </div>
  </div>

删除 wire:ignore 并更新您的代码，如下所示

将其添加到组件视图的底部

@push('scripts')
    <script>
        document.addEventListener("livewire:load", function(event) {
            window.livewire.hook('afterDomUpdate', () => {
                jQuery(function($) {
                    $('.desc').shorten({
                       chars: 300,
                       ellipses: '...',
                       more: 'see more',
                       less: '...less'
                    });
                });
           });
       });
   </script>

@endpush

将 stack blad 标签放在布局文件中正文结束标签的正上方

        @stack('scripts')
   </body>

每次刷新/更新组件时，这将确保您的脚本是还包括

【讨论】：