Question

这就是我想做的事情

<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>

我在用户点击ul #chat_rooms后附加聊天室时创建使用此代码

$('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>");
});

我已经有了这个功能

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

这是我的问题如果我点击用户与他聊天，我的房间将会更好，但不会将每个的效果作为默认房间我想如果用户点击任何房间房间直接处理每个请求并从数据库中获得结果

Answer 1

您无法使each中的代码适用于代码运行时尚不存在的元素。

将该代码放在一个函数中，以便您可以重用它：

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

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

现在在添加房间时使用它：

$('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);
});

Jquery：使用.append添加代码并使其在jquery中的.each中工作

1 个答案: