Question

我尝试使用HTML / jQuery创建评论流，就像在Reddit上一样。

我已经有主要帖子回复按钮的评论表格，就像我想要的方式一样，现在我希望在所有儿童评论回复按钮上使用相同的表格。

我尝试使用inserAfter（）使用下面的jQuery代码来执行此操作，但它只是部分工作，即当我点击任何子评论的回复按钮时，评论表单出现一次用于最后一个孩子评论，然后当我点击两次评论表格会显示所有儿童评论。

以下是我的jQuery -

$(".comment-box-link, .comment-box").on('click', function(e) {
    $('.new-topic-wrapper').slideToggle('fast');

    if ($(".new-topic-wrapper").is(':visible')) {
        $("html, body").animate({ scrollTop: $(".new-topic-wrapper").offset().top - 50 }, 'fast');
    }
});
$('.comment-box').click(function(e) {
    $('.new-topic-wrapper').show().insertAfter('.comment-bottom');
});

Answer 1

您需要限制附加到single-comment-wrapper点击的功能。找到所单击按钮的相应祖先，然后在所需元素后面附加：

$('.comment-box').click(function(e) {
    $('.new-topic-wrapper').show().insertAfter($(this).closest('.single-comment-wrapper').find('.comment-bottom'));
});

请参阅：https://codepen.io/anon/pen/broyzo

Answer 2

您可以通过AJAX

在div中加载页面html内容

$.ajax({
    url: 'html_file.html',
    type: 'POST',
    dataType: 'html',

})
.done(function(result) {
    $("#output").html(result);
});

尝试使用ajax在页面中加载html - Jquery Ajax

如何使用HTML中显示的相同表单在页面上的不同位置显示

2 个答案: