x-on not working after sorting

[DonCamillo11]

When using the sort plugin, after sorting an item the x-on no longer works for this item.

This is an modified example from the @calebporzio screencast:

<div class="flex flex-col gap-5">
    {{-- Todo list --}}
    <div group="todos" x-sort handler="sort" class="grid gap-3 min-w-[20rem]">
        @foreach ($this->items as $item)
            <div x-sort:item="{{uniqid()}}" x-on:click="alert('test')" wire:key="{{uniqid()}}" class="group flex items-center justify-between p-1.5 bg-white rounded-full shadow shadow-slate-300">
                <div class="px-3 py-1 flex gap-2 items-center">
                    <div class="transition translate-x-[-1.5rem] [body:not(.sorting)_&]:group-hover:translate-x-0 opacity-0 [body:not(.sorting)_&]:group-hover:opacity-100 text-slate-300 cursor-pointer" >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                            <path fill-rule="evenodd" d="M2 3.75A.75.75 0 0 1 2.75 3h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75ZM2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8Zm0 4.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
                        </svg>
                    </div>

                    <div class="transition translate-x-[-1.5rem] [body:not(.sorting)_&]:group-hover:translate-x-0 text-sm text-slate-600">test</div>
                </div>

                <button wire:click="remove({{uniqid()}}" type="button" class="transition opacity-0 [body:not(.sorting)_&]:group-hover:opacity-100 text-slate-500 hover:bg-emerald-100/75 hover:text-emerald-700 rounded-full p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
                        <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
        @endforeach
    </div>
</div>

[ekwoka]

Is this in 3.14.4? this version has a bug with moved elements being deleted (that has been fixed in a recent PR)

[DonCamillo11]

Thanks, problem solved after updating to 3.14.5.