Javascript inline function call

Question

I have a question about inline function call in javascript.

This example works:

<button onclick="{alert($(this).text());}">Testing</button>

While this is not working:

<button onclick="function(){alert($(this).text());}">Testing</button>

My question is - why is the second case not working and the first one does?

I've come accross this issue, using jQuery-UI droppable:

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

Droppable is also using this syntax (without function()). Why is that?

You're making an anonymous function, not calling it. – jdmdevdotnet Apr 14 '17 at 17:16 — jdmdevdotnet, Apr 14 '17 at 17:16

Derek 朕會功夫 · Answer 1 · 2017-04-14T16:52:59.130

6

<button onclick="function(){alert($(this).text());}">Testing</button>

That is equivalent to:

yourButton.addEventListener("click", function(){
    function(){
        alert($(this).text());
    };
});

Can you see why it's not working now?

edited Apr 14 '17 at 16:52

answered Apr 14 '17 at 16:49

Derek 朕會功夫

92,235
44
185
247

2

Beat me to it. This is the best answer for this situation. – James Monger Apr 14 '17 at 16:51

Karl-Johan Sjögren · Accepted Answer · 2017-04-14T17:00:37.127

Lets break this down sample by sample

<button onclick="{alert($(this).text());}">Testing</button>

This would be same as doing the following in pure javascript.

document.querySelector('button').addEventListener('click', function() {
  {
    alert($(this).text());
  }
});

It's a bit weird to add extra braces like that but it is fully allowed and the code within will be executed. For your second sample this gets really weird though.

<button onclick="function(){alert($(this).text());}">Testing</button>

This would be the same as this.

document.querySelector('button').addEventListener('click', function() {
  function() {
    alert($(this).text());
  }
});

In other words, when you click on the button you'll declare a new function but you'll never call it. To get around this you would need to wrap it in paranthesis and then call .call(this) on the function to execute with the same this as the caller.

document.querySelector('button').addEventListener('click', function() {
  (function() {
    alert($(this).text());
  }).call(this);
});

Or in your style.

<button onclick="(function(){alert($(this).text());}).call(this)">Testing</button>

`}).bind(this)();` should be rewritten as `}).call(this)`, otherwise you're needlessly creating a new function from the anonymous one before calling it, instead of just calling the anonymous function itself. — , Apr 14 '17 at 16:56

score 2 · Answer 3 · answered Apr 14 '17 at 16:49

2

example 1

Your passing statement. So it's working.

example 2

Your passing callback function. Javascript onclick doesn't support callback.

About droppable, droppable is a jquery plugin so it will support callback function.

answered Apr 14 '17 at 16:49

Aravind Sivam

1,089
8
23

score 2 · Answer 4 · answered Apr 14 '17 at 16:50

Because the brackets are superfluous, and likely being ignored:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="alert($(this).text());">Testing</button>

If you want to encapsulate it in a function and run it as such, I suppose it would need to be self-invoking:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="(function(){alert($(this).text());})();">Testing</button>

But then the this value gets unbound.

The droppable syntax is something completely different-- you can think of it like this:

var configObj = { // this isn't a function, it's a config object
  drop: function( event, ui ) {}  // this is a function value of the property drop
}
$( ".selector" ).droppable(configObj);

Javascript inline function call

4 Answers4