添加SignalR

Question

我已经实现了使用SignalR为帖子添加评论，并且效果很好。我在这里遇到错误的问题是：当我为帖子添加评论时，它在帖子下方显示评论，但是当我单击“ x”按钮删除该评论时，它什么也不做。我做错了什么？ ：（

解决方案： 问题是这样的： 在jQuery中，对删除的评论是绑定的单击事件，不影响动态附加的元素。 将其更改为$(document).on("click", ".delete-comment", function(){});可解决问题。

Here，您可以阅读有关此内容的更多信息。

欢迎任何建议。

下面是添加注释的代码：

comment.js //添加并显示评论

"use strict";

var $conn = new signalR.HubConnectionBuilder().withUrl("/ModulClan/Helper/KomentarHub").build();

$(".commentButton").prop("disabled", true);

$conn.start().then(function () {
    $(".commentButton").prop("disabled", false);
}).catch(function (err) {
    return console.error(err.toString());
});

$conn.on("ReceiveMessage", function (userId, postId, numOfComments, obj) {
    var j = postId + 498;
    var pId = postId + 148;
    var d = formatDate(obj.dateOfPublish);
    var x = '<div id="comment-' + obj.commentId + '" style="display: block;"><div class="comment"><div class="user-info"><span class="user">' + obj.Member.Name + " " + obj.Member.LastName + '</span> <span class="publish-date">' + d + '</span><a href="#' + postId + '" data-kid=' + obj.commentId + ' data-uid= ' + userId + ' data-pid= ' + pId + ' class="delete-comment pull-right margin-l-15"><i class="fa fa-close"></i></a></div><div class="comment-text"><span>' + obj.commentContent + '</span></div></div></div>'
    var y = '<div id="comment-' + obj.komentariObjavaClanovaId + '" style="display: block;"><div class="comment"><div class="user-info"><span class="user">' + obj.Member.Name + " " + obj.Member.LastName + '</span> <span class="publish-date">' + d + '</span></div><div class="comment-text"><span>' + obj.commentContent + '</span></div></div></div>'
        var currentUserId = $('#post-id-' + pId).attr("data-uid");
    $('[name="comment-' + j + '"]').val("");
    $('.numOfComments-' + pId).html('(' + numOfComments + ')');

    if (parseInt(userId) == parseInt(currentUserId)) {
        $('#comments-section-' + pId).append(x);
        $('#comments-section-' + pId).slideToggle();
    } else {
        $('#comments-section-' + pId).append(y);
    }
});

$(".commentButton").bind("click", function (event) {
    var userId = $(this).attr("data-userid");
    var postId = $(this).attr("data-postid");
    var j = parseInt(postId) + 498;
    var content = $('input[name="comment-' + j + '"]').val();

    if (content == "") {
        content = null;
    }
    if (content != null) {
        $conn.invoke("AddComment", userId, postId, sadrzaj).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    }
});

$('.showComments').bind("click", function (event) {
    var x = $(this).attr("data-id");
    $("#contents-section-" + x).slideToggle();
});

这是用于删除评论（在同一文件comment.js中）

$(".delete-comment").bind("click", function (event) {
var kId = $(this).attr("data-kid");
var uId = $(this).attr("data-uid");
var pId = $(this).attr("data-pid");

$conn.invoke("deleteComment", kId, uId, pId).catch(function (err) {
    return console.error(err.toString());
});
});

$conn.on("ReceiveMessageDelete", function (kId, uId, pId, numOfComments) {
    $("#comment-" + kId).remove();
    $('.numOfComments-' + pId).html('(' + numOfComments+ ')');
});

这是.cshtml中引用注释的代码的一部分

<div class="row">
  <div id="comments-section-@pId" class="col-sm-12 comments-section">
  @foreach (var k in post.Comments){
    <div id="comment-@k.commentId" style="display: block;">
      <div class="comment">
        <div class="user-info">
          <span class="user">@k.Member.Name @k.Member.LastName</span>
          <span class="publish-date">@k.dateOfPublish</span>
          @{
            if (userId == k.ClanId) {
              <a href="#@p.Post.PostId" data-kid="@k.CommentId" data-uid="@userId" data-pid="@pId" class="delete-comment pull-right margin-l-15"><i class="fa fa-close"></i></a>
            }
          }
        </div>
        <div class="comment-text">
          <span>@k.commentContent</span>
        </div>
      </div>
    </div>
   }
  </div>
</div>