Question

That’s what i want to do

<ul>
   <li> <a href="#" alt="1"> User1 </a>
   <li> <a href="#" alt="2"> User2 </a> 
</ul>

<div id="chat_rooms">

  <div id='pvt0' class='pvtroom' page='room.php?id=0'><span>Chating With Default</span>
      Here Is chat words
 </div>

</div>

i make it when user click on ul make chat room appended in #chat_rooms
Using This Code

$('ul li a').live("click",function(){
       var uid = $(this).attr("alt");
       var uname = $(this).text();
       $("#chat_rooms").append("<div id='pvt"+uid+"' class='pvtroom' page='room.php?id="+uid+"'> <span> Chating With "+ uname`enter code here` +" </span> </div>");
});

and i have this function work already

  $('.pvtroom').each(function(){
         // my ajax request to room here
         $(this).css("border","1px solid #f00");
  });

Here is my problem
if i click to user to chat with him my room will apper but will not take the effect of each as the default room
i want if user click on any room room work directly with each request and get result from database

Answer 1

You can’t make the code in the each apply to elements that doesn’t exist yet when the code runs.

Put that code in a function so that you can reuse it:

function initChatRoom(room) {
  // my ajax request to room here
  room.css("border","1px solid #f00");
}

$('.pvtroom').each(function(){
  initChatRoom($(this));
});

Now use it when you add a room:

$('ul li a').live("click",function(){
  var uid = $(this).attr("alt");
  var uname = $(this).text();
  var room =
    $("<div/>", { id: 'pvt'+uid, 'class': 'pvtroom', page: 'room.php?id='+uid })
    .append($("<span/>").text('Chatting With '+ uname));
  $("#chat_rooms").append(room);
  initChatRoom(room);
});