Wire:click interfere with Jquery function

#1

I have a button using wire:click and a function call with a Jquery to change the color of the button.
It works when I use wire:ignore, but no function call, the button turns green and stays green.
When I use wire:click, the function call is made and the button turns green and back to white.

<button id="10" type="button" wire:click="addTip(10)" class="w-1/3 border-black bg-white py-2 font-bold text-xl mr-6 text-center pointer" style="border-width: 10px;">10%</button>

<script>
    $(document).ready(function() {
        $(document).on('click','button#10', function (){
            $(this).toggleClass('bg-green-500');
        });
    });
</script>
#2

Hey, @ALAINF971

Try to use JavaScript hooks and remove wire:click="addTip(10)"

    $(document).ready(function() {
        $(document).on('click','button#10', function (){
           this.livewire.call('addTip(10)');
            $(this).toggleClass('bg-green-500');
        });
    });
#3

Thank you very much.
I tried your solution, but I got the following error:

Uncaught TypeError: Cannot read property ‘call’ of undefined

#4

Hey, @ALAINF971

Sorry for that. You can do this instead and without jQuery at all.

In your blade:

    <button id="button#10">10%</button>

    <script>
        let  button = document.getElementById('button#10');

        button.addEventListener('click', function () {
            
            window.livewire.emit('addTip', 10);
            button.classList.toggle('bg-green-500')

        })
    </script>

And in your component:


    protected $listeners = ['addTip'];

    public function addTip($value)
    {
        // do your logic
    }

PS: This code was tested with livewire V2.x

2 Likes
#5

Hey, thank you very much for your help. Very appreciated!!

#6

Glade to help :slight_smile: