views:

80

answers:

2

Hey

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!

+3  A: 

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

ram
$(newtabid).live("click", function(){ $(this).functionThatDoesWhatYouWant();}); Should give you want you want.
Isaac Hodes
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
CodeMonkey
@Isaac: He should attach it to the span than the new tab id, don't you think ?
ram
@CodeMonkey: Correct. And just also be aware of the fact that "Live events do not bubble in the traditional manner "
ram
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
CodeMonkey
+1  A: 

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>");
Justin Johnson
No Justin. That is exactly what you'd think. But this will reference the -content- area of the newly created tab. Not the button.
CodeMonkey
@CodeMonkey Your right. I've never used jQueryUI tabs and failed to read the documentation. I've remove the first example
Justin Johnson