Question

过去几天我一直在研究评论系统，但遇到了几个问题：

消息评论未附加到正确的div - 我该怎么做继续将评论附加到正确的div然后创建一个允许另外评论的新div
每当用户点击元素的“评论”链接时在页面下方，它们会被移动到页面顶部引起混淆

如何解决这些问题？

我已在此处发布了我的系统演示，因为需要完成相当多的代码：http://jsfiddle.net/BQ84D/3/

以下是相关的JS代码：

$(document).ready(function () {
    $('.comment_button').click(function () {
        var ID = $(this).attr("id");
        var comment = $("#ctextarea" + ID).val();
        var dataString = 'comment=' + comment + '&msg_id=' + ID;
        if (comment.match(/^\s*$/)) {
            $(function () {
                $("#dialog-message2").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        } else {
            var stuff = '<div class="stcommentbody" id="stcommentbody"><div class="stcommentimg"><img src="sri.jpg" class="small_face"/></div> <div class="stcommenttext">' + comment + '<div class="stcommenttime"></div> </div></div>';
            $("#commentload" + ID).append(stuff);
            $("#ctextarea" + ID).val('');
            $("#ctextarea" + ID).focus();
        }
        return false;
    });
});

Answer 1

这是一个演示。 http://jsfiddle.net/gxELB/

我添加了以下代码，以便在评论框

之前插入评论

$('<div class="commentcontainer" id="commentload5"><div class="stcommentbody" id="stcommentbody5"><div class="stcommentimg"><img src="" class="small_face"></div><div class="stcommenttext">    <b>Test</b>&nbsp;' + comment + '<div class="stcommenttime">8 days ago</div></div></div></div>').insertBefore('#commentbox' + ID);

我还添加了以下代码以防止表单提交，以便演示工作。

$('form').submit(function (e) {
    e.preventDefault();
});

要解决问题＃2，我删除了href =“＃”属性。您也可以使用e.preventDefaut（）来解决此问题。

Answer 2

试用this fiddle

Point 1.

我认为你在小提琴中只有一个div commentload。

Point 2.

$("[id^='commentlink']").click(function (e) {
    e.preventDefault(); // <--prevent the default behavior clicked link
});

如果您点击了所有链接中的.preventDefault()或使用了上述链接，则只要点击了以commentlink

开头的ID链接，页面就不会跳转到顶部

没有附加到正确的div和div切换的注释会导致跳转到页面顶部

2 个答案: