JQueryUI Tabs: OK to reuse DOM element ID's?

I am using JQueryUI tabs to display a number of lists. Each list is pulled in from an external file. While each list is unique, there is some common functionality between them - for example, the user is able to delete an item from each list.

I use the currently selected tab to determine how to handle the page, like this:

    load: function(event, ui){
        var tab = $("#tabs").tabs("option", "selected");
            case 0:
                // do stuff here
            case 1:
                // do stuff here

In the "// do stuff here" I refer to each list, which is in a table, with its own ID.

However, when a user wants to delete an item I reuse the same ID:

$("#dlg_delete").dialog();  // options removed for brevity

The div with the id='dlg_delete' appears in each page that is dynamically loaded when a tab is clicked.

Is it OK to reuse that same ID, since it can only be loaded once? Or is there something I may be missing. It is much easier, for code reuse, to just have one id.


As long as there is only one element with that id in the DOM at any given time, it's OK, if I've understood correctly.

That way, if you want to access something by id, you still can.

Need Your Help

Dynamic web content with VB6 (java servlet inspired)

com vb6

I'm working on a project that needs more 'flare' than what can normally be done with VB6. My thought is to generate HTML/CSS content and display this within a browser control on a form. I would a...

Getting image dimensions for images that do not have width and height specified in source

javascript jquery ajax

I want to get the height and width of an image that does not have its width and height tag specified in the HTML source.