Understanding bind in javascript

Question

I have a select element with id settings-select.These are the two different ways I am binding event.Why is 'this' value not bound to select element even after using 'bind' in second method.

   1. 
    $('body').on( 'change', '#settings-select', function() {
        console.log( $(this).val ); // outputs correct select value
    });

   2.
    $('body').on( 'change', '#settings-select', selectSettings.bind( this ) );

    function selectSettings() {
        console.log( $(this).val() );// Throws error. this -> window object. Why?
    }

Satpal · Accepted Answer · 2016-12-28 12:43:09Z

2

When using bind, this doesn't refers to current element. It refers to window object.

You just need to pass the function reference

$('body').on( 'change', '#settings-select', selectSettings)

As per comment, some argument to selectSettings. You can use event.data

var x = 1;
$('body').on('change', '#settings-select', {
  value: x
}, selectSettings)

function selectSettings(event) {
  console.log(event.data.value, $(this).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='settings-select'>
  <option>1</option>
  <option>2</option>
</select>

edited Dec 28, 2016 at 12:43

answered Dec 28, 2016 at 12:27

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

john doe Over a year ago

Why does $(this).val() works inside selectSettings function in this case?Can you please explain?

Satpal Over a year ago

In this scenario, this is set with current element context so it works

john doe Over a year ago

How can I pass arguments to selectSettings?

Satpal Over a year ago

@johndoe, api.jquery.com/event.data updated answer with snippet

Rajaprabhu Aravindasamy · Accepted Answer · 2016-12-28 12:27:14Z

2

Throws error. this -> window object. Why?

Because, $('body').on( 'change', '#settings-select', selectSettings.bind( this ) ); This particular code was executed in window's context. So there this would point to window.

And a rule behind bind function is, once you bound a context to a function using bind, then that wouldn't be changed to any after that.

answered Dec 28, 2016 at 12:27

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Sudharsan S · Accepted Answer · 2016-12-28 12:30:28Z

0

In the second method just pass the function callback reference like this

$('body').on( 'change', '#settings-select', selectSettings)

yes both are same functionality, But there difference between the First method and second one,

1) It is an anonymous callback function.

 $('body').on( 'change', '#settings-select', function() {
        console.log( $(this).val() ); // outputs correct select value
 });

2) If you want reusable function go to second method then where want you to bind the same function

$('body').on( 'change', '#settings-select', selectSettings);

    function selectSettings() {
        console.log( $(this).val());
    }

answered Dec 28, 2016 at 12:30

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

Understanding bind in javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related