2012-12-12 46 views
0

我正在構建一個類似於facebook的消息區域,我正在使用jquery和一個asmx web服務將ajax提供給客戶端。當使用c#在頁面加載中首次加載內容時,我的li click事件起作用,但是當ajax運行並刷新Web服務中的內容時,li事件不再起作用。ReferenceError:getMessage未定義

這是從Web服務返回的HTML的一個例子

<ol class="messagesrow" id="messages"> 
<li id="2345"> 
<div>Test Element</div> 
</li> 
</ol> 

Web服務標記

[WebMethod] 
public string GetMessagesByObject(string id, string objectid, string userid, string timezone) 
{ 
    string output = string.Empty; 

    try 
    { 
     StringBuilder str = new StringBuilder(); 

     DataSet results = results from store procedure 

     str.Append("<ol class=\"messagesrow\" id=\"messages\">"); 
     for (int i = 0; i < results.Tables[0].Rows.Count; i++) 
     { 
      DataRow row = results.Tables[0].Rows[i]; 

      DateTime date = Convert.ToDateTime(row["CreateDate"].ToString()).AddHours(Convert.ToDouble(timezone)); 

      if (!TDG.Common.CheckStringForEmpty(row["ParentMessageID"].ToString())) 
      { 
       str.Append("<li id=\"" + row["ParentMessageID"].ToString() + "\">"); 
      } 
      else 
      { 
       str.Append("<li id=\"" + row["MessageID"].ToString() + "\">"); 
      } 

      str.Append("<div style=\"width:100%; cursor:pointer;\">"); 

      str.Append("<div style=\"float:left; width:25%;\">"); 
      if (!TDG.Common.CheckStringForEmpty(row["ImageID"].ToString())) 
      { 
       str.Append("<img src=\"/Resources/getThumbnailImage.ashx?w=48&h=48&id=" + row["ImageID"].ToString() + "\" alt=\"View Profile\" />"); 
      } 
      else 
      { 
       str.Append("<img src=\"/images/noProfileImage.gif\" alt=\"View Profile\" />"); 
      } 
      str.Append("</div>"); 

      str.Append("<div style=\"float:left; width:75%; padding-top:4px;\">"); 
      str.Append("<strong>" + row["WholeName"].ToString() + "</strong>"); 
      str.Append("<br />"); 
      if (row["BodyMessage"].ToString().Length < 35) 
      { 
       str.Append("<span class=\"smallText\">" + row["BodyMessage"].ToString() + "</span>"); 
      } 
      else 
      { 
       str.Append("<span class=\"smallText\">" + row["BodyMessage"].ToString().Substring(0, 35) + "</span>"); 
      } 
      str.Append("<br /><span class=\"smallGreyText\">" + String.Format("{0:g}", date) + "</span>"); 
      str.Append("</div>"); 

      str.Append("</div>"); 
      str.Append("</li>"); 
     } 
     str.Append("</ol>"); 

     output = str.ToString(); 
    } 
    catch (Exception ex) 
    { 
     throw ex; 
    } 

    return output; 
} 

jQuery的標記

$(document).ready(function() {   

    $("ol#messages li").click(function() { 
     var id = $(this).attr("id"); 

     getMessage(id); 
    }); 
}); 

function getMessage(id) { 

     var timezone = $('#<%= hdfTimezone.ClientID %>').val() 
     var userid = $('#<%= hdfUserID.ClientID %>').val() 

     $.ajax({ 
      type: "POST", 
      async: false, 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      url: "/Resources/MessageWebService.asmx/GetMessage", 
      data: "{'id':'" + id + "','timezone':'" + timezone + "','userid':'" + userid + "' }", 
      success: function (data) { 
       $('#<%= hdfMessageID.ClientID %>').val(id); 
       $('#<%= ltlMessages.ClientID %>').html(data.d); 
      }, 
      error: function (data) { 
       showError(data.responseText); 
      } 
     }); 

    } 
+0

你是什麼意思的「不工作」?您是否嘗試在瀏覽器中調試Javascript以查找失敗點? –

+2

您正在收到的錯誤沒有意義,但是由於新元素沒有綁定事件,所以事件停止觸發。你應該使用.on方法在這裏使用事件委託。 –

+0

這似乎是正確的答案,爲什麼你不把它作爲答案? –

回答

0

由於列表項是動態的,你應該從ol委託事件。

$(document).ready(function() {   

    $("#messages").delegate("li","click",function() { 
     getMessage(this.id); 
    }); 

}); 

您得到的錯誤ReferenceError: getMessage not defined不應該與給定的代碼發生。

+0

感謝您的幫助。終於做到了。 – chadn