In this open-ended series I'll be showcasing a snippet of buggy jQuery code that you might encounter, explain what the problem is, and then identify how you can easily resolve the issue.
You can view other posts in this series...
The Desired Feature
We want to use an existing object's method to be invoked when the user clicks on a button.
The Buggy Code
The following code snippets is our first attempt at solving the problem, but there is a subtle error. Do you see it?
You can view, run, and edit the above code sample from the following embedded jsFiddle.
The result that we expected was to see was an alert box showing up when the user clicks the Register button, but instead the following error shows up in the console.
The Underlying Problem
At the root of the problem is that once the event handler is invoked jQuery makes sure the
thispseudo parameter is set to the DOM element that caused the event.
Inside of the
conference.registermethod listed above, the
thisparameter refers to the register button DOM element. Since
thisis a DOM element that is why we are getting the "Cannot call method 'push' of undefined" error.
What we need to resolve this issue is a way to control the value of the
thisparameter when the
conference.registermethod is invoked. Thankfully, there is a way in jQuery to do this.
The solution to fix this problem is really simple and straightforward. As of version 1.4, jQuery added the
$.proxy()method to help solve the bug found in the previous example.
jQuery.proxy( function, context )
Returns: FunctionTakes a function and returns a new one that will always have a particular context.
In order to fix our example we just need to wrap the
conference.registermethod with the
$.proxy()method and provide the context that we want the pseudo
thisparameter to represent.
You can view, run, and edit the above code sample from JSBin.
If you test out the code again below you'll notice that once you've filled in the textbox and click enter then the behavior will continue as we expected.
The above solution shows how you can use the
thisparameter will be just like we did with the
The following code snippet shows how you can use the
.call()method to control the
In a very similar way the next snippet of code shows how you can use the
.apply()method as an alternate solution.
NOTE: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments. -- https://developer.mozilla.org/...
You can view, run, and edit the above code sample from jsFiddle.
The key concept to remember here is that if you ever need to control the value of the pseudo
thisparamater inside an event handlers, then you can use the
$.proxy()method in jQuery. In addition, you could just use the
Until next time...