点击事件后的jQuery

Question

I'm currently having problems with my C# web application. Here is my JavaScript:

$(document).ready(function () {
$("#submitComment").click(function () {
    $.post("/Home/Index", { "CommentText": $("#CommentText").val() }, function (Comment) {
        for (var index = 0; index < Comment.length; index++) {
            var dateObject = eval('new' + Comment[index].CommentDate.replace(/\//g, ' '));
            Comment[index].CommentDate = cleanDate(dateObject);
        }

        $("#commentList li").not("li:last").replaceWith($("#commentTemplate").tmpl(Comment));
        for (var newIndex = 0; newIndex < Comment.length; newIndex++) {
            addLikeToComment(Comment[newIndex].ID);
        }
    });
});

function cleanDate(dateObject) {
    var Month = dateObject.getMonth();
    var Day = dateObject.getDate();

    var month = new Array("Janúar", "Febrúar", "Mars", "Apríl", "Maí", "Júní", "Júlí", "Ágúst", "September", "Október", "Nóvember", "Desember");

    var Hour = dateObject.getHours();
    var Minute = dateObject.getMinutes();

    if (Hour < 10)
        Hour = "0" + Hour;
    if (Minute < 10)
        Minute = "0" + Minute;

    var dateString = (Day + ". " + month[Month] + " " + Hour + ":" + Minute);
    return dateString;
}

function addLikeToComment(ID) {
    $.get("Home/GetLikeByID/" + ID, "", function (Likes) {
        if (Likes.length != 0) {
            var selector = "div #" + ID;
            $("#likeTemplate").tmpl(Likes).appendTo($(selector));
        }
    });
}

$("#commentList li div.commentBody div a").click(function (event) {
    var id = $(this).find("span").html();
    id = id.replace(/^\s+|\s+$/g, "");

    $.post("/Home/AddLike/" + id, "", function (LikeList) {
        if (LikeList.length != 0 || LikeList[0].UserName != "") {

            var selector = "div #" + id;
            $(selector).empty();
            $("#likeTemplate").tmpl(LikeList).appendTo($(selector));
        }
    });
    event.preventDefault();
});});

And the templates:

    <script id="commentTemplate" type="text/html">
    <li>
        <a href="http://www.ru.is"><img src='<%= Url.Content("~/Images/User.png") %>' alt="Notandi" /></a>

        <div class="commentBody">
            <a href="http://www.ru.is">${UserName}</a>
            <span>${CommentText}</span>

            <div>
                <abbr title='${CommentDate}'>${CommentDate}</abbr>
                <a href="#"><span style="display:none;"> ${ID} </span>Líkar þetta</a>

                <div id="${ID}" class="likeList">
                </div>
            </div>
        </div>
    </li>
</script>

<script id="likeTemplate" type="text/html">
    <p class="likeLook"> ${UserName} Líkar þetta.</p>
</script>

Both works independently but if I click the "#submitComment" and then click "#commentList li div.commentBody div a" then that event doesn't fire, ie I can create a comment but after that I can't "Like" anything. Does anyone know what the problem is?

Answer 1

Its hard to say exactly but it looks to me like you are manipulating #commentList on callback of your $.post . If thats the case its likely that you are just losing your click handler on the object itself.

A simple test would be to change

$("#commentList li div.commentBody div a").click(function(event){...

to

$("#commentList li div.commentBody div a").live('click',function(event){...