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

Question

搜索后

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

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>

对不起我的英语不好

Answer 1

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

有两种可能的解决方案

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

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

2. wire:ignore通过像下面这样更新您的代码来删除and

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

   @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 标签放在布局文件中 body 结束标签的正上方

           @stack('scripts')
      </body>
   

   每次刷新/更新组件时，这将确保您的脚本也包含在内