Livewire搜索后文本截断脚本（...see more）失效求助

Got it, let's break down why your truncation script stops working after a search. The core issue is that Livewire dynamically re-renders parts of the DOM when you run a search, but your jQuery initialization only runs once on the initial page load. Those newly rendered .desc elements never get the shorten() method applied to them.

Here's how to fix it step by step:

Step 1: Refactor Your JavaScript to Re-run After Livewire Updates #

Wrap your shorten logic in a reusable function, then listen for Livewire's livewire:update event (this fires every time Livewire finishes updating the DOM). This ensures the script runs both on first load AND after every search.

jQuery(function($) {
    // Create a reusable function to initialize content truncation
    function initContentShortening() {
        // Optional: Reset existing shortened content before re-initializing
        // This prevents duplicate "see more" buttons if the DOM re-renders
        $('.desc').each(function() {
            // Restore original content (we'll store this in a data attribute next)
            const originalContent = $(this).data('original-content');
            if (originalContent) {
                $(this).html(originalContent);
            }
            // Clean up any existing elements generated by the shorten plugin
            $(this).find('.shortened, .more-link, .less-link').remove();
        });

        // Apply the shorten plugin to all .desc elements
        $('.desc').shorten({ 
            chars: 300, 
            ellipses: '...', 
            more: 'see more', 
            less: '...less' 
        });
    }

    // Run on initial page load
    initContentShortening();

    // Run every time Livewire finishes updating the DOM (e.g., after search)
    document.addEventListener('livewire:update', initContentShortening);
});

Step 2: Store Original Content in a Data Attribute #

To safely reset content before re-truncating, add a data-original-content attribute to your .desc div. This stores the unmodified post text so we can restore it if Livewire re-renders the element.

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

Why This Works #

• The livewire:update event triggers right after Livewire replaces or updates DOM elements from your search results.
• Re-running initContentShortening() on this event ensures every new (and existing) .desc element gets the truncation logic applied.
• The data attribute prevents nested truncated content or duplicate "see more" buttons that could happen if we re-apply the plugin to already shortened text.

Alternative: Component-Specific Hook (Optional) #

If you have multiple Livewire components on the page and want to target only your search component, use Livewire's component-specific hook instead:

<script>
document.addEventListener('livewire:initialized', function() {
    Livewire.hook('message.processed', (message, component) => {
        // Only run for your search-posts component
        if (component.name === 'search-posts') {
            initContentShortening();
        }
    });
});
</script>

This is more efficient as it only runs the truncation logic when your search component updates.

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