Question

I want to bind/unbind event listener to window resize I am using the .on()/.off() functions to do it, because .off() require to pass the same function as in .on() I created a separate function which is passed in both places.

Here is the code (not working):

var i = 0;
function onResizeListener(){
    $('#debug').html(i);
    i++;
}
$(document).ready(function() {
    $(window).on('resize',onResizeListener());
});

Example: http://jsfiddle.net/eRupC/2/

This one is working: http://jsfiddle.net/eRupC/1/ when I wrap the onResizeListener() with an anonymous function.

The desirable result in the example: When you resize your window the number has been changed.

Answer 1

Try this if you need to pass something to onResizeListener. If not, remove the parenthesis from onResizeListener as the the other answers say. Bind Documentation

$(document).ready(function() {
  var x = 2;
  var y = 4;
  $(window).bind('resize', function() {
    onResizeListener(x, y);
  });
});

This would also work:

$(document).ready(function() {
  $(window).on('resize', function() {
    onResizeListener();
  });
});

To unbind the function call from the resize event but still pass parameters to the function you could use:

$(document).ready(function() {
    //bind
    $(window).bind('resize', { foo: 'bar' },onResizeListener);

    //unbind, wrap in event you wish to use to unbind it
    $(window).unbind('click', onResizeListener);
});