jQuery Forum

First I create an instance of my widget "postBox", which has a method defined for it called "open". I can then immediately call that method using the correct syntax no problem at all:

1. $('<div/>").postBox({id: 'box-new-slide', title: 'New Slide'});
2. $('#box-new-slide').postBox('open');

So far, so good. (The id of the widget is set in the _create() method.)

Elsewhere in the application, I have a simple button click event handler, in which I want to call the same "open" method on my postBox widget:

But, this time, even though it's the exact same code, all that happens is that a new postBox widget is created, as though JQuery no longer thinks that the element with the id "#box-new-slide" is an existing widget.

The kicker is that when I replace that method call with the same call in a different format, it still works!

1. $('#box-new-slide').data('postBox').open();

So the element still has all the widget data associated with it, and it still behaves like a widget, but when I try to access it using the recommended syntax (calling the .postBox method on the element) it fails when I'm calling it from an event handler. 

I can still get it to work using the alternative syntax, but I know it's cheating, and it's messy when you have to use two different syntaxes depending on where in the code you are accessing the widget from. All this code is in the same javascript file and outside any widget classes.

So what's going on here? Obviously it's something to do with the context of the call when made, it would seem that I am missing something fundamental.