2012-12-12 9 views
0

저는 페이스 북과 비슷한 메시징 영역을 구축 중이며 html을 클라이언트에 제공하기 위해 jquery 및 asmx 웹 서비스와 함께 ajax를 사용하고 있습니다. 내 li 클릭 이벤트는 C#을 사용하여 페이지로드시 컨텐츠가 처음로드 될 때 작동하지만, ajax가 실행되어 웹 서비스의 컨텐츠를 새로 고치면 li 이벤트가 더 이상 작동하지 않습니다.ReferenceError : getMessage가 정의되지 않았습니다.

이 웹 서비스에서 반환 된 HTML의 예

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

웹 서비스 마크 업

[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와 마크 업

+0

"작동하지 않음"이란 무엇을 의미합니까? 실패 지점을 찾기 위해 브라우저에서 Javascript 디버깅을 시도 했습니까? –

+2

당신이 얻고있는 오류는 이해가되지 않습니다. 그러나 새로운 요소에 이벤트가 바인딩되어 있지 않기 때문에 이벤트가 트리거되지 않습니다. .on 메서드를 사용하여 여기에서 이벤트 위임을 사용해야합니다. –

+0

이것은 올바른 대답 인 것 같습니다. 답으로 게시하지 않으시겠습니까? –

답변

0

목록 항목이 동적이기 때문에

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

    } 
, 당신은 ol에서 이벤트를 위임해야합니다.

$(document).ready(function() {   

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

}); 

당신이 주어진 코드를 발생하지 않아야 ReferenceError: getMessage not defined을 받고 오류.

+0

도움을 주셔서 감사합니다. 그것은 마침내 그것을했다. – chadn

관련 문제