Why I got error calling function in js file which is included with mix?

On laravel 8 site with jquery 3.6 I make layout items.blade.php in which include js file:

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Items</title>
    <script src="{{ mix('js/items.js') }}"></script>
</head>

<body class="items">
<div class="content-wrapper">
    {{ $slot }}
</div>
</body>
</html>

In file resources/js/items.js I define custom function :

console.log('items.js start::')  // I see console message
window.$ = window.jQuery = require('jquery');


$(function () {
    console.log('items.js jquery is inited::') // I see console message
    function itemsActionClicked(itemsId) {
        console.log('itemsActionClicked itemsId::')
        console.log(itemsId)
    }

    $('.a-items-action-clicked').click(function (event, param) {
        // I see console messages
        console.log('a-items-action-clicked event::')
        console.log(event)
        console.log('a-items-action-clicked param::')
        console.log(param)
    });

});

But calling function from blade.php file :

<a onclick="itemsActionClicked(param1,param2)" class="a-items-action-clicked">
    Click
</a>

I got error :

Uncaught ReferenceError: itemsActionClicked is not defined at HTMLAnchorElement.onclick

Event by .a-items-action-clicked class is triggered, but I also need to pass custom parameters to itemsActionClicked function.

In file webpack.mix.js I added line

mix
    .js('resources/js/items.js', 'public/js')
    ...

and run command :

npm run watch-poll

How can I call itemsActionClicked ?

s4muel

2 years ago

Level 50

seems like a scope problem at first sight, try to define the function outside of the jquery

function itemsActionClicked(itemsId) {
    console.log('itemsActionClicked itemsId::')
    console.log(itemsId)
}

$(function () {
    console.log('items.js jquery is inited::') // I see console message

    $('.a-items-action-clicked').click(function (event, param) {
        // I see console messages
        console.log('a-items-action-clicked event::')
        console.log(event)
        console.log('a-items-action-clicked param::')
        console.log(param)
    });
});

or keep it there, but call the function inside of the .click handler (as where your 4 console logs are) instead of the html onclick attribute

Please or to participate in this conversation.