Question

I’m very new to javascript and jquery, so I apologize if this is a very simple question ahead of time. 🙂

I’m using JQuery UI’s Tabs in a simple webpage, and I was trying to add a double click function to the Tab names which would invoke a JQuery Modal Dialog and allow the user to change the name of the tab. Since I have a dynamic number of tabs on the page, I don’t want to limit the doubleclick function to the specific tab’s “id”, so I’ve created a “class”.

With what I have so far is within the dblclick function of the class “renameable-tabs”. I want to override the text(), but once I’m inside the dialog constructor, $(this) now refers to the dialog box. I’ve tried to access the event.target and event.target.id and override the text(), but I just haven’t had any luck getting it to work.

Any input/help would be appreciated! Thanks!

I’ve put together pretty simple jsfiddle to show the problem: http://jsfiddle.net/79Evd/

Answer 1

In the dblclick event handler store this is a local variable and then you can access it inside the dialog Add callback. This is an example of closure where javascript keeps track of all the variables within the scope.

Working demo