javascript - 如何使用 HTML 中存在的相同表单出现在页面的不同位置 onclick

Question

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

我已经有了主帖子回复按钮的评论表单，就像我想要的那样工作，现在我希望对所有子评论回复按钮使用相同的表单。

我尝试使用下面的 jQuery 代码使用 inserAfter() 来做到这一点，但它只部分起作用，即当我点击任何子评论的回复按钮时，评论表单只为最后一个子评论出现一次，然后当我我点击它两次评论表单将显示所有子评论。

下面是我的 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