jquery - Using bind, apply or call in JavaScript Example -

i'm dynamically creating table row full of checkboxes using javascript in function populateparametertr(parameters). in function, set event handler such when checkbox made active, hidden input field created in togglehidden function.

what i'm having trouble trying call togglehidden create these hidden input elements after checkbox created, ie not in event handler. reason being: want these hidden input fields when checkboxes loaded first time. understanding calling togglehidden() results in this pointing global scope.

i've had @ bind,call , apply see if below:

togglehidden(display, parametercontainer).bind(checkbox);  

can advise me if can done. i'm looking @ example exercise head around using these methods.

code:

var populateparametertr = function(parameters) {    var checkboxes = $('<td></td>');     (var in parameters) {      var display = parameters[i].display;      var checkbox = $('<input>').attr({        //...      });       var parametercontainer = $('<div></div>').addclass('parameter').append(checkbox);       checkboxes.append(parametercontainer);       togglehidden(display, parametercontainer).bind(checkbox);        checkbox.on('change', togglehidden(display, parametercontainer));      } }  var togglehidden = function(display, tabledivide) {    return function() {      if (this.checked) {        var hidden = $('<input>').attr({          //......        });        hidden.appendto(tabledivide);      } else {        $(this).siblings("input[type='hidden']").remove();      }    }; }; 

.call , .apply directly executes function first param thisarg, difference between them .call accepts parme .call(thisarg, param1, param2....) , .apply accepts .apply(thisarg, [param1, param2....]).

.bind returns new function, when executes, use first param when call .bind thisarg, , if gives other param, it'll put directly origin function you, e.g:

var func = function(param1, param2) {   console.log(param1, param2); }; var bindfunc = func.bind(null, 1);  bindfunc(2);  // log 1, 2 

take above knowledge examine code post:

togglehidden(display, parametercontainer).bind(checkbox); 

it seems want call it, , this reference checkbox, can write:

togglehidden.call(checkbox, display, parametercontainer); // or  togglehidden.apply(checkbox, [display, parametercontainer]); 

then part:

checkbox.on('change', togglehidden(display, parametercontainer)); 

here want call togglehidden when checkbox change, you're listen checkbox's change event, , input param should pre-defined, can write

checkbox.on('change', togglehidden.bind(checkbox, display, parametercontainer)); 

you can more info js call() & apply() vs bind()?, mdn-function-bind, mdn-function-call.