jquery不会更新动态生成的html

Question

我有一个加载我的收件箱消息的ajax函数，并且每个消息都有一个user_type和read字段。

我正在循环消息并为它们生成html。

function initializeMailbox() { 
    // get all mailbox data 
    user.GetInboxMessages(function (response) { 
     if (response) { 
      inboxMessages['inbox'] = response; 
      $("#inbox-table").fadeIn(); 
      loadInboxTable(); 
      inboxDataTable = $("#inboxTable").dataTable(); 
      $("#inbox-count").html(inbox_msg_count); 
      displayMessage(first_msg_id); 
     } 
    }); 
} 
function loadInboxTable() { 

    for (var i = 0; i < inboxMessages['inbox'].length - 1; i++) { 
     first_msg_id = inboxMessages['inbox'][0].message_id; 
     var user_type = ""; 
     if (inboxMessages['inbox'][i].user_type = 1) 
      user_type = "DONOR"; 
     else if (inboxMessages['inbox'][i].user_type = 0) 
      user_type = "CANDIDATE"; 
     else if (inboxMessages['inbox'][i].user_type = 2) 
      user_type = "GROUP"; 

     $("#inbox-table-body").append(
      "<tr class='data-row' style='height: 75px;'> " + 
       "<td>" + 
       "<input type='hidden' id='user_type' value='" + inboxMessages['inbox'][i].user_type + "'/>" + 
       "<input type='hidden' id='read' value='" + inboxMessages['inbox'][i].read + "'/>" + 
       "<input type='checkbox' id='" + inboxMessages['inbox'][i].message_id + "'></input></td>" + 
       "<td>" + 
       "<p class='left'>" + 
       "<img class='td-avatar' style='margin-top: 0px !important;' src='/uploads/profile-pictures/" + inboxMessages['inbox'][i].image + "' alt='avatar'/>" + 
       "<br/>" + 
       "<span class='user-type'>" + user_type + "</span>" + 
       "</p></td><td>" + 
       "<h2 onclick='displayMessage(" + inboxMessages['inbox'][i].message_id + ");'>" + inboxMessages['inbox'][i].firstname + " " + inboxMessages['inbox'][i].lastname + "</h2><br/>" + 
       "<h3 class='message-subject' onclick='displayMessage(" + inboxMessages['inbox'][i].message_id + ");'>" + inboxMessages['inbox'][i].subject + "</h3><br/><br/>" + 
       "<h3 style='font-size: 0.7em; margin-top: -25px; float:left;'><span>" + inboxMessages['inbox'][i].datesent.toString().split(" ")[0] + "</span></h3>" + 
       "</td>" + 
       "<td><button class='delete-item' onclick='deleteMessage(" + inboxMessages['inbox'][i].message_id + ");' src='/images/delete-item.gif' alt='Delete Message' title='Delete Message' style='cursor: pointer; float:left; margin-left: 5px; margin-top:-3px;'></button></td>" + 
       "</tr>" 
     ); 
     // check if the message has been read 
     if (inboxMessages['inbox'][i].read == 0) { 
      // not read 
      $("#message-subject").addClass('read-message'); 
     } else { 
      // read 
      $("#message-subject").removeClass('read-message'); 
     } 
     inbox_msg_count++; 
    } 
} 

现在，如果我警告user_type和read的值，我会根据它正在迭代的消息得到正确的值。但是当它输出时，它只使用第一条消息的值。

我需要能够动态地使用jQuery根据这些值设置消息的样式。当你确实有一类

$("#message-subject").addClass('read-message');

：有人能告诉我这是为什么不工作...

Answer 1

好，一件事，您使用的ID选择

<h3 class='message-subject'...

用途：

$(".message-subject").addClass('read-message');

其次，你在做的，而不是做USER_TYPE上的比较（==）的分配（=）。

我可以建议一个不同的方法，而不是一个大的if..then..else？

使用数组索引你user_types：

var user_type_labels = [ 'CANDIDATE', 'DONOR', 'GROUP' ]; 

function loadInboxTable() { 

    for (var i = 0; i < inboxMessages['inbox'].length - 1; i++) { 
     first_msg_id = inboxMessages['inbox'][0].message_id; 

     // One line instead of an if/then/else 
     var user_type = user_type_labels[ inboxMessages['inbox'][i].user_type ]; 
     ... 

三，要添加使用相同的ID，以你的DOM多个项目。这不合法，后果不确定。

<input type='hidden' id='user_type' value='... 
<input type='hidden' id='read' value='... 

您需要为此使用类。

<input type='hidden' class='user_type' value='... 
<input type='hidden' class='read' value='... 

Answer 2

在你的代码，我想你的意思做以下

如果（inboxMessages [ '收件箱'] [我] .user_type === 1）

通知等号。你目前拥有的将始终为真，并且user_type将始终分配给DONOR