Add .click() to dynamically created tab
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!
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
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>");
精彩评论