Question

我正在构建一个类似于facebook的消息传递区域，我正在使用ajax和jquery以及asmx web服务来向客户端提供html。当使用c＃在页面加载时首次加载内容时，我的li click事件有效，但是当ajax运行并刷新来自Web服务的内容时，li事件不再起作用。

这是从Web服务

返回的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标记

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

    }

Answer 1

由于您的列表项是动态的，因此您应该委托ol。

中的事件

$(document).ready(function () {        

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

});

给定代码不应该出现ReferenceError: getMessage not defined错误。

ReferenceError：未定义getMessage

1 个答案: