单击并定位并附加到特定的DOM元素

Question

感谢您允许我将您用作资源。 我正在制作一个博客页面，其中包含共享同一课程的不同评论，并且它们都具有共享课程的回复按钮。 单击“答复”按钮时，会弹出一个模式，用户可以在其中输入他/她的答复，而单击“后答复”时，答复应发布到特定评论。 我很难定位到该特定评论的路径。 我知道“ this”关键字会起作用，但是我不确定是否正确使用了它，也正在阅读.attr（）并认为我可能在这里需要它。 我想使其正常工作，以便有人也可以答复答复，甚至可以将答复“推送”到JSON模板中并以这种方式附加，但这比我现在所知道的更多。 即使您没有给我完整的解决方案，让我知道我需要阅读的内容也会有所帮助！ 谢谢！

    //Reply button function to show modal//////////////////////////////////
        sabio.page.handlers.replyButtonClickToShowModal = function (event) {
            event.preventDefault();
            $('#myModal').modal();
            console.log("reply button is firing");
        };

        $(".replyButton").on('click', sabio.page.handlers.replyButtonClickToShowModal);

        //Get reply from modal form and append to correct comment//////////////////////////////////////
        sabio.page.handlers.submitReplyButtonClick = function () {
            var clickedLink = $(this).closest(".comment.mediaclearfix");
            var replyTitle = $('#addReplyTitle').val();
            var replyEmail = $('#addReplyEmail').val();
            var replyContent = $('#addReplyContent').val();
            var replyFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
           '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' +
           replyTitle + '</h3> <div class="comment-meta">By ' + replyEmail + '</div> <div class="comment-body"> <p>'
           + replyContent + '</p><a href="#" class="replyButton">' +
           '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
            clickedLink.append(replyFormat);
            console.log("submit reply function is firing");
            $('#myModal').dialog('close');
        };


        $('.btn.btn-success.cmdAddComment').on('click', sabio.page.handlers.submitReplyButtonClick);   

Answer 1

我相信您的方法几乎是正确的99％。 我唯一看到的错误是在以下语句中：

var clickedLink = $(this).closest(".comment.mediaclearfix");

这是行不通的，因为这里this基准是submit于模态对话框存在按钮。 因此，我们需要对此作如下修改：

注意：以下代码更改将基于以下假设进行： 一次，用户可以打开单个模式弹出窗口以提交其回复。

       //Reply button function to show modal//////////////////////////////////
        sabio.page.handlers.replyButtonClickToShowModal = function (event) {
            event.preventDefault();
            $('#myModal').data("clickedLinkRef", $(this));  //saving the clicked link ref for future use
            $('#myModal').modal();
            console.log("reply button is firing");
        };

现在，在submit按钮处理程序中，我们将获取保存的单击链接引用，以定位适当的“注释”。

$(".replyButton").on('click', sabio.page.handlers.replyButtonClickToShowModal);

//Get reply from modal form and append to correct comment//////////////////////////////////////
sabio.page.handlers.submitReplyButtonClick = function () {

    var clickedLink = $('#myModal').data("clickedLinkRef").closest(".comment.mediaclearfix"); //fetching the saved clicked link reference

    var replyTitle = $('#addReplyTitle').val();
    var replyEmail = $('#addReplyEmail').val();
    var replyContent = $('#addReplyContent').val();
    var replyFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
   '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' +
   replyTitle + '</h3> <div class="comment-meta">By ' + replyEmail + '</div> <div class="comment-body"> <p>'
   + replyContent + '</p><a href="#" class="replyButton">' +
   '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
    clickedLink.append(replyFormat);
    console.log("submit reply function is firing");
    $('#myModal').dialog('close');
};


$('.btn.btn-success.cmdAddComment').on('click', sabio.page.handlers.submitReplyButtonClick);

我希望这将帮助您实现目标。