将.click（）添加到动态创建的标签页

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!

Answer 1

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

Answer 2

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>");