x-on:mouseenter event not working after DOM element deleted using Livewire.

[johncarter-]

Firstly, I'm not sure if this is a Livewire or Alpine issue, so sorry if I need to clear off.

• I have some CSS grid items that have a x-on:mouseenter event attached to them.
• The grid items have a button that fires a delete event via a Livewire (wire:click).
• When the deleted grid item is removed from the DOM and the next grid item fills its place the x-on:mouseenter fails to work on the subsequent grid elements.

Explainer of issue: https://youtu.be/e6hPF5PFMC8

Code:

<div x-data="{hovered: null}">
  <div x-on:mouseenter="hovered = {{ $task->id }};" x-on:mouseleave="hovered = null" :class="{'border-blue-600 bg-gray-50' : hovered == {{ $task->id }} }">
    <div wire:click="markDone({{ $task->id }})">&times;</div>
  </div>
  <!-- more divs -->
</div>

[ryangjchandler]

@johncarter- have you tried using CSS for the hover styles?

hover:border-blue-500 hover:bg-gray-50

You could conditionally output these classes using Blade as well, with either @if() or a ternary.

[johncarter-]

Yep! But when I hover over any of the data-task-id="1" divs I want all of them to change CSS.

How would I do it? @if('this or another div with same data-task-id is hovered) border-blue-500 bg-gray-50 @endif

[ryangjchandler]

In that case, Alpine is what you need. You'll need to use a wire:ignore somewhere so that Livewire doesn't update the elements with the new markup from the server though.

[johncarter-]

Okay, but those divs are an Eloquent collection from a Livewire controller, that get re-rendered when a user adds or deletes them. If I wire:ignore doesn't that break the DOM diff?

[ryangjchandler]

Yeah, alternatively, add wire:key="somethingHere" to each of the <div>s to see if that helps.

[johncarter-]

No joy. ( Thanks for your persistence and working blind! )