.click Function Working Without Arguments, But Not Working With Arguments

I have this function which was working: $('#buttFurniture').click(onFilterCLick); but then i decided to add some argument to the function and it stopped working: $('#buttFurniture

Solution 1:

The solution: Use bind to assign arguments when passing functions:

 $('#buttFurniture').click(onFilterCLick.bind($('#buttFurniture'), arrOutput, arrFurniture));

Explanation: In javascript, functions are what's known as first class objects - that means they can be passed around as variables, like other primitives (numbers, booleans etc.), but also as arguments to functions.

In this regard, it's important to note a key difference in passing a function as a variable, and invoking a function. For example, consider the following function:

var myFunc = function () {
    return0;
} 

Now, note the difference between these two statements:

typeof myFunc // "function"typeofmyFunc() // "number"

As you can see, the first is a reference to the function itself, and the second is the invocation of that function - a subtle but key difference.

Your click handler expects a function as it's argument, and NOT a function invocation (or the result of a function being called). That's why you must use bind: bind allows you to pass the function itself, but also gives you the ability to pre-fill the arguments of the function you're passing.

In brief, the bind() function (in your case) takes 3 arguments - the first argument, in every bind() function, is the this parameter - setting this to your selected element is necessary, so that your $(this) invocation has the right context. The other arguments are where you pre-fill the rest of your function's parameters.

Hope this helps!

Solution 2:

You can use the callback function of click event to call another function with parameter.

$('#buttFurniture').click(function () {
    onFilterCLick(arrOutput, arrFurniture)
});

Solution 3:

I would recommend to use the .bind(null,func_arguments) method as described by @JonathanBrooks when you don't use the $(this) inside the function definition since this would refer to window object.

However, if you want to select the context as 'this' then I would recommend you to use like this:

functiononFilterCLick(elem,arrFull,arrCurrent) {
  //now you can use elem to refer $(this)
  elem.css("background-color", "#656565");
}

And use the anonymous function for the click event like this:

$('#buttFurniture').click(function(){
    onFilterCLick($(this),arrOutput,arrFurniture);
});

A working code example here

Solution 4:

It doesn't work because you're calling onFilterCLick(arrOutput, arrFurniture) in $('#buttFurniture').click(onFilterCLick(arrOutput, arrFurniture)); not passing onFilterCLick as handler for click event.

Solution 5:

In case if #buttFurniture is generated after the DOM is ready

functiononFilterCLick(arrOutput, arrFurniture) {
    console.log(arguments);
    console.log($(this));
    $(this).toggleClass('red-border');
};

$('#buttFurniture').on('click', function (evt) {
    evt.preventDefault();
    var holder = onFilterCLick.bind(this); 
    holder('argOne', 'argTwo');
});

.bind(this) will override this inside function scope if you want to select same element that you clicked.

UPDATE

I've updated the example, sorry for untested code, here is the fidle also read this article for better bind understanding ;)

This also will work.

var holder = onFilterCLick.bind(this, 'argOne', 'argTwo'); 
holder();

I hope this will help you.