CODEWITHSUNDEEP
javascriptjqueryself-invoking-function
devSK
devSK

Reputation: 2026

Self invoking function inside jQuery event is not working

Self invoking function defined inside jQuery event is not working, but why?

$('div').on('click', function(){
  $('div').text($('div').text() + 1)
  (function(){
    $('div').text($('div').text() + 0)
  })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>text</div>

Edit: Answers below are focused on this keyword so I've changed this parameter to 'div'. It still does not work.

Upvotes: 4

Views: 1016

Answers (3)

t.niese
t.niese

Reputation: 40882

Your problem is that you miss a ; at the end of $('div').text($('div').text() + 1)

Without the ; it is the same as if you would write:

$('div').text($('div').text() + 1)(function(){
   $('div').text($('div').text() + 0)
})();

But because text($('div').text() + 1) does not return a function, you will get this error.

Uncaught TypeError: $(...).text(...) is not a function

This is one situation where you have to use the ; to end your statement.

ecma-262: 11.9.2 Examples of Automatic Semicolon Insertion

The source

a = b + c
(d + e).print()

is not transformed by automatic semicolon insertion, because the parenthesised expression that begins the second line can be interpreted as an argument list for a function call:

a = b + c(d + e).print()

So you have to write:

$('div').text($('div').text() + 1);
(function(){
   $('div').text($('div').text() + 0)
})();

Upvotes: 2

Suren Srapyan
Suren Srapyan

Reputation: 68685

Inside that IIFE the this refers to another context. Each function has it's own context. You can use arrow function, explicitly binding of the context or just keep this reference into another variable and use it. One more thing, you missed to put ; after the first statement, this will cause an error.

Also don't use this style in that code $('div'), this will find all divs but get the text of the first one, so you do more job than it needs.

Arrow function

$('div').on('click', function() {
    $(this).text($(this).text() + 1);
    (() => {
      $(this).text($(this).text() + 0)
    })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

Explicit binding of the context 

$('div').on('click', function(){
    $(this).text($(this).text() + 1);
    (function() {
        $(this).text($(this).text() + 0)
    }).bind(this)();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

Keep the reference into another variable

$('div').on('click', function(){
    const that = this;
    $(that).text($(that).text() + 1);
    (function(){
      	$(that).text($(that).text() + 0)
    })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

Upvotes: 4

Majid
Majid

Reputation: 72

$(document).ready(function(){
$('div').on('click', function(){
	$(this).text($(this).text() + 1);
    var divelement = $(this);
	(function(element){
  	element.text($(element).text() + 0);
  })(divelement);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>text</div>

Upvotes: -2

Related Questions