laravel livewire组件中的JS点击事件监听器？

Question

I'm trying to add some JS to add a click event to an element within a livewire component. The click event works as expected on first load, however as soon as I run a wire:click, the JS click events no longer work?

I can see that livewire is removing / updating the dom elements when I click the wire:click element so unsure whether this may have something to do with it.

What am I doing wrong? How should I be registering click events to livewire elements in JS and ensure they always work?

My javascript:

document.addEventListener('livewire:load', function () {

    let pb_responsive_button = [...document.querySelectorAll('.js-pb-responsive')];

    pb_responsive_button.map(function (btn) {
        btn.addEventListener("click", function () {
            console.log('click');
        });
    });

});

livewire:

<button wire:click="addComponentActive(true)">
   <span class="font-bold text-sm">Add Page Block</span>
</button>

public function addComponentActive(bool $bool)
{
    $this->add_component_active = $bool;
}

my view:

@if ($add_component_active === true)
    <section class="bg-white shadow-lg rounded-sm mb-8 w-full h-[calc(100%-64px)] absolute z-50">
        .....
    </section>
@endif
    <section class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
        <div class="border border-gray-200 rounded">
            <div class="bg-gray-200 p-5 flex justify-between">
                <div class="bg-white border border-gray-200 rounded p-2">
                    <span class="font-bold text-sm">Homepage</span>
                </div>
                <div class="bg-blue-600 text-white border border-gray-200 rounded p-2">
                    <button wire:click="addComponentActive(true)">
                        <span class="font-bold text-sm">Add Page Block</span>
                    </button>
                </div>
                <div class="flex justify-between items-center gap-2">
                    <div class="js-pb-responsive js-pb-mobile bg-white border border-gray-200 rounded p-2">M</div>
                    <div class="js-pb-responsive js-pb-tablet bg-white border border-gray-200 rounded p-2">T</div>
                    <div class="js-pb-responsive js-pb-desktop bg-white border border-gray-200 rounded p-2">D</div>
                </div>
            </div>
        </div>
    </section>

UPDATE:

I've updated it to show and hide the blocks rather than display it in a conditional if statement which ensures the click events still work, since the element still exists on page.

<section class="{{$add_component_active === true ? 'block' : 'hidden'}}"> ... </section>

Surely there is a better way to handle this. I notice I have a livewire:load eventListener? Is there another event I should be listening to when the livewire view is reloaded to reinitise the JS events?

Any help would be much appreciated.

Answer 1

Livewire works hand-in-hand with Alpine.js. You should focus on Alpine if you want strictly front-end functionality https://alpinejs.dev/directives/on

<button @click="alert('Hello World!')">Say Hi</button>