I'm developing a laravel application, there I want to set a onclick function to Html anchor element. So I created it as following way.

In my blade view

<a class='pon' id="{{$value[1]}}" href="#" onclick="return myFunction();">
    <div class="mq-friends thumbnail">
       <div class="mq-friends-footer">
          <small>{{$value[0]}}</small>
       </div>
    </div>
</a>

my resources/assets/js/app.js

function myFunction() {
    console.log('whatever');
    return true;
}

This is not working, (I also carefully checked that app.js file has built into public/js/app.js using laravel-mix (npm run dev) and the function myFunction() is there.)

What I want to know is why it is not working? is there any problem with blade?

Note: This is clearly working when I insert this script into my same blade view without adding to js file:

<script type='text/javascript'>
     function myFunction()
     {
          console.log('whatever');
          return true;
     }
</script> 

I'm developing a laravel application, there I want to set a onclick function to Html anchor element. So I created it as following way.

In my blade view

<a class='pon' id="{{$value[1]}}" href="#" onclick="return myFunction();">
    <div class="mq-friends thumbnail">
       <div class="mq-friends-footer">
          <small>{{$value[0]}}</small>
       </div>
    </div>
</a>

my resources/assets/js/app.js

function myFunction() {
    console.log('whatever');
    return true;
}

This is not working, (I also carefully checked that app.js file has built into public/js/app.js using laravel-mix (npm run dev) and the function myFunction() is there.)

What I want to know is why it is not working? is there any problem with blade?

Note: This is clearly working when I insert this script into my same blade view without adding to js file:

<script type='text/javascript'>
     function myFunction()
     {
          console.log('whatever');
          return true;
     }
</script> 

• javascript
• php
• html
• laravel
• laravel-blade

Share Improve this question Follow edited Nov 16, 2017 at 3:41 Vajira Prabuddhaka asked Nov 15, 2017 at 13:48 Vajira PrabuddhakaVajira Prabuddhaka 94244 gold badges1717 silver badges3838 bronze badges 3

• 4 notice the difference between the definition and the call. onclick="return myFunction();" while function theFunction() { – Ofir Baruch Commented Nov 15, 2017 at 13:50
• In case it helped you, may I write it as an answer for your approval? – Ofir Baruch Commented Nov 15, 2017 at 13:56
• Oops sorry, that is not the case, it is a mistake when I asked the question, because I changed it very simply to understand as a question appropriate here.. – Vajira Prabuddhaka Commented Nov 15, 2017 at 14:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Im not 100% sure of it, but:

I think when you want to bind the anchor onclick event, you need to bind the function to the window object, like this in your app.js:

  window.myFunction = function(ev) {
     console.log(ev)
  });

In my case it solved.

Another way (seems to be the remended one) is binding in an unobtrusive way.

Hope it helps o/