jQuery after click event issue

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, i.e. I can create a comment but after that I can't "Like" anything. Does anyone know what the problem is?

This is an issue that's hard to fix without actually running and debugging your code. Have you tried debugging it in Firebug? — Adam Albrecht
– Adam Albrecht, Commented Mar 25, 2011 at 18:42
Here is a good tutorial on debugging javascript with different browsers: jqueryfordesigners.com/debugging-tools — Sam
– Sam, Commented Mar 25, 2011 at 18:48
All I can find using the debugger is that it just skips the click event on the link. I think it might have something to do with my templates, since I use replaceWith jquery function. Although I'm not sure. Also if that tutorial didn't actually show anything it just kinda told me where to go nothing more. — Siemsen
– Siemsen, Commented Mar 25, 2011 at 19:40

HurnsMobile · Accepted Answer · 2011-03-25 20:06:12Z

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){...

answered Mar 25, 2011 at 20:06

HurnsMobile

4,3913 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Siemsen Over a year ago

Okay this seemed to have solved it, but being a javascript/jquery noob I must ask: What just happened and why did this solve it? PS. Thanks alot :P .

HurnsMobile Over a year ago

At a casual glance it looks like you are adding more/modifying #commentList. The click() method is a shortcut to .bind('click',... which binds to all matching elements on the page when the method is invoked. Where as .live('click',... binds to all matched elements now or in the future. So if you add new matching elements to the page they will not have the event handler bound unless you use .live(). More detail here jqapi.com

Siemsen Over a year ago

Thanks, this explains it. And yes I'm replacing the list with another list so of course it would just simply de-reference. Thanks again.

Collectives™ on Stack Overflow

jQuery after click event issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related