Add .click() to dynamically created tab

Question

I'm attempting to add a .click() to a tab that I add dynamically.

Code so far:

var newtabid = "#privChatArea" + chatmessage.SenderID;

$("#tabs").tabs("add", newtabid, "<span style=\"color: red;\">" + chatmessage.SenderNick + "</span>");

I can't seem to figure out how to reference the Tab-button, as the only element I am actually giving an ID is the <div id="privChatArea[id]"></div>

Anyone know how to do this?

EDIT: Clarification

The tabs consist of

   <div id="tabs">
    <ul id="tabscontainer">
        <li><a href="#chatroom1" id="_chatroom1"><span>test1</span></a></li>
        <li><a href="#chatroom2" id="_chatroom2"><span>test2</span></a></li>
        <li><a href="#chatroom3" id="_chatroom3"><span>test3</span></a></li>
    </ul>
    <div id="chatroom1" style="max-height: 400px; height: 400px; width: 100%; overflow-y: scroll;">
    </div>
    <div id="chatroom2" style="max-height: 400px; height: 400px; width: 100%; overflow-y: scroll;">
    </div>
    <div id="chatroom3" style="max-height: 400px; height: 400px; width: 100%; overflow-y: scroll;">
    </div>

I'm having trouble getting a reference to the id of the which is created when the tab is also created. This ID is not specified when using the .tabs("add")

Cheers!

ram · Accepted Answer · 2009-12-13 20:43:04Z

2

use "live" to bind events for dynamically created elements. You can choose one kind of selectors (may be a class etc) for all your tabs and bind events with live on your $(document).ready()

http://docs.jquery.com/Events/live

Edit: After reading your question again, thought I should clarify. You should bind the live event to the "span" which you are creating

edited Dec 13, 2009 at 20:43

answered Dec 13, 2009 at 20:37

ram

11.7k16 gold badges68 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Isaac Over a year ago

$(newtabid).live("click", function(){ $(this).functionThatDoesWhatYouWant();}); Should give you want you want.

user191152 Over a year ago

So the point of "live" is that I would setup live like: $('selector-for-all-tab-buttons').live("click", function () { //yada; }); correct? And even when new ones are added, the .live will automatically work for them

ram Over a year ago

@Isaac: He should attach it to the span than the new tab id, don't you think ?

ram Over a year ago

@CodeMonkey: Correct. And just also be aware of the fact that "Live events do not bubble in the traditional manner "

user191152 Over a year ago

I've added a clarification. Maybe the setup of the tabs is a bit unclear. The buttons are in a <ul><li><a href="#"></a></li><li>.......</li></ul>, with the content in seperate <div>'s

Justin Johnson · Accepted Answer · 2009-12-14 03:26:53Z

0

Should be as simple as:

$("#tabs span.private-chat-area").live("click", function(e) {
    var senderId = $(this).attr("rel");
    ...
});

var newtabid = "#privChatArea" + chatmessage.SenderID;

$("#tabs").tabs("add", newtabid, "<span style=\"color: red;\" class=\"private-chat-area\" rel=\"" + chatmessage.SenderID + "\">" + chatmessage.SenderNick + "</span>");

edited Dec 14, 2009 at 3:26

answered Dec 13, 2009 at 20:37

Justin Johnson

31.4k7 gold badges67 silver badges89 bronze badges

2 Comments

user191152 Over a year ago

No Justin. That is exactly what you'd think. But this will reference the -content- area of the newly created tab. Not the button.

Justin Johnson Over a year ago

@CodeMonkey Your right. I've never used jQueryUI tabs and failed to read the documentation. I've remove the first example

Collectives™ on Stack Overflow

Add .click() to dynamically created tab

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related